CSS horiz menu link bkgrd dissappearing in IE

[SewaKenti]

Hi All,

I'm fairly new to working with CSS, but have caught on pretty quickly. I could really use some help solving this issue.

I've created a horizontal test menu using CSS and the whatever:hover hack from Peterned. When I mouseover the parent links the background changes from Orange to Purple. When the drop menu appears in Firefox and I mouseover the new submenu links the parent link continues to be Purple. This is great, it works here.

The Problem is when I test this in IE. When I mouseover the submenu the parent link background color reverts to Orange, when it should stay Purple. I'm not dumb, but this thing is driving me nuts. I would be very greatful for any help to see what it is I am missing.

Here is the CSS (its fairly short) that I am using:

body {
behavior:url("csshover.htc");
background:olive;
}

/*MENU*/
ul {
padding: 0;
margin: 0;
list-style-type: none;
}

ul li {
display: block;
float: left;
position: relative;
background-color: transparent;
margin: 0;
padding-right: 25px;
}

/*subMENU*/
ul li ul {
display: none;
position: absolute;
padding: 0px;
margin: 0px;
top: 0px;
left: 0px;
}

ul li ul li {
float: none;
position: relative;
top: 18px;
left: 0px;
margin: 0px 0px -1px 0px;  /*Firefox & IE hack - collapses bottom borders*/
padding: 0px;
background-color: transparent;
}

/* LINKS */
/*MENU*/
ul li a, ul li a:visited { 
display: inline;
background-color: orange;
text-decoration: none;
padding-right: 35px;
padding-left:4px;
color: lime;
font-weight: bold;
}
/*subMENU*/
ul li ul li a, ul li ul li a:visited {		
background-color: black;
}

/* MENU HOVERS */
ul li a:hover, ul li a:focus {
background-color: purple;
}
ul li:hover > a {  /*Firefox & others*/
background-color: purple;
}

/* subMENU HOVERS */
ul li ul li a:hover, ul li ul li a:focus {
background-color: blue;
}
ul li ul li:hover > a {	 /*Firefox & others*/
background-color: blue;		
}

/* CODE THAT USES .HTC TO DISPLAY HOVERS IN IE */
li:hover ul, li.over ul {
display:block;
}

Here's the HTML

<ul>  
<li><a href=""><span></span>item</a></li>  
<li>
	<a href="#" title="item"><span></span>menu</a>  
	<ul>  
		<li><a href="#" title="item"><span></span>submenu</a></li>
		<li><a href="#" title="item"><span></span>submenu</a></li>
		<li><a href="#" title="item"><span></span>submenu</a></li>
	</ul>
</li>  
<li><a href="">item</a></li>
</ul>

THANKS!!!!!!!

 

[spewn]

i checked out your code and ran it...when i hover over the names item menu item, the background changes, but no sub menu...

i'm working ie.

- g

 

[BillyRayPreachersSon]

SewaKent,

You'd need to include the source for "csshover.htc" for anyone to be able to see exactly what you are seeing... or better still, a URL to the page.

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]

 

[SewaKenti]

Sorry about not listing the URL. I've been working on the code and finally decided to ditch it. I found that the new and improved .sfhover javascript code found on

http://www.htmldog.com

website (Son's of Suckerfish) ended up being what I needed.

The final code ended up looking like this:

/*Company*/
#nav li.company a {
background: url(../images/bttn-co.gif) 0px 8px no-repeat;
width: 131px;
height: 24px;
border-bottom: 1px black solid;
}
#nav li.company a:hover {
background: url(../images/bttn-co.gif) -131px 8px no-repeat;
}
#nav li.company.sfhover a.co { /*IE*/
background: url(../images/bttn-co.gif) -131px 8px no-repeat;
}
#nav li.company:hover > a { 	/*Firefox & others*/
background: url(../images/bttn-co.gif) -131px 8px no-repeat;
}

Here's the code from htmldog:

<!--//--><![CDATA[//><!--

sfHover = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" sfhover";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]>

Again, thanks for the effort. I hope someone can use my bit of code to solve their problem!!!