[Root Ninja]

Hi all,

This problem is with IE ... The menu below works exactly how I want it to in FireFox, but not in IE (surprise surprise). In IE the long parameters do not take effect (if i removed class="long" it would look the same), does anyone know why? - any feed back in very welcome

.nav li:hover ul,
.nav li a:hover ul,
.options li:hover ul,
.options li a:hover ul {
visibility:visible; 
height:auto; 
width: 160px;
background-image: url(/images/layout/drop.png);
background-position: bottom; 
top: 34px; 
overflow:visible;
z-index: 5;
text-align: left;
}


ul li:hover .long,
ul li a:hover .long{
visibility:visible; 
height:auto; 
width: 270px;
background-image: url(/images/layout/dropLong.png);
background-position: bottom; 
top: 34px; 
overflow:visible;
z-index: 5;
text-align: left;
}


<ul class="nav">
					
            		<li><a href="/products/" title="Products">Products</a>
                	<ul class="long">
                    	<li><a href="/link1/">Link1</a></li>
                        <li><a href="/link2/">Link2</a></li>
                        </ul>
                
</ul>

[Rotuy]

It would help to see the site in aid of identifying the problem.

[Root Ninja]

Unfortunately I can do that due to client confidentiality, altho if you have any idea what it may be I can supply additional parts of the code, if you believe there is something else conflicting.

[Shiro]

Points
1) you are missing a closing li tag after the first closing ul tag. Try adding that and see if it helps.

2) This:

ul li a:hover .long

will not work. ul.long is not contained inside the a tags, so it is not a child of the a tag. But that CSS is describing it as a child of the a tags.

3) Which IE - IE6? If so, your problem lies there - :hover only works on a(nchor) elements in IE6. Which may be where your problem lies. This:

ul li:hover .long

will work in firefox, because you can add :hover to elements other than a(nchor) tags. But IE6 will just ignore it.

[Root Ninja]

Hi Shiro,

I have tried all of the above with no luck. With the exception of the last one, the issue is in IE6 and IE7, is there an alternative for :hover?

[Shiro]

That means something in your CSS has a higher specificity on that element. Try adding the ID of an ancestor element in front of your selector. So for example if ul.nav is contained inside a div with the id of #left-toolbar or something like that, you would change:

ul li:hover .long

to:

#left-toolbar ul li:hover .long

Adding the ID will give this a higher specificity level than it has now. Whether or not that is enough to give it more specificity than whatever is overpowering it now or not, I don't know, cause I can't see your code. But it's something to try.

If you aren't using firefox with the firebug plugin, you should. It will show you what is the stronger CSS declaration for a particular element.

[7twelve]

IE only accepts :hover on anchor elements and it should try changing your selector to this

ul.long li a:hover{}

if you absolutely must have a hover effect on non anchor elements, javascript onmouseover is the only way to go really.