sub nav not showing in IE

[AnotherAndrew]

I’m trying to get my navigation to work, but I can’t get it to work in IE. When you mouseover "resources" or "about us", a sub navigation bar appears. But not in IE 7 or 8.

Look at this in firefox, chrome, safari:

http://0000qx5.previewcoxhosting.com/resources.php

Does anyone have suggestions? I’m going crazy trying to solve this!! I am sure it has to be something simple….

There’s nothing fancy going on in the html and here is the css:

Code:

#navWrapper {position: absolute; top: 110px; left: 0px; z-index: 1000; background:#6b6d70; width: 1000px; opacity: 0.8; filter: alpha(opacity=80); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}
#navigation {list-style:none;font-size: 0.8125em; font-weight: bold; letter-spacing: 0.17em; text-transform: uppercase; color: #c0c0c0;zoom: 1; }
#navigation li {float:right;text-align:center; padding: 5px; }
#navigation a {font-weight: bold;color: #e1e1e1;display: block; text-decoration: none; padding: 10px 10px; }
#navigation a:hover {color:#fff; background: #414244;}
#navigation ul {position:absolute;left:-999em;width:690px;list-style:none;line-height:0;margin-left:310px;}
#navigation li:hover {color:#fff;background: #414244; }
#navigation li li {float:right;width:auto;text-align:left; padding: 10px 10px; }
#navigation li li a {color: #fff; font-size: 0.875em; float:right; padding: 5px 8px;}
#navigation li li:hover {color:#fff;background: #c0c0c0;}
#navigation li:hover ul {left:0; background: #414244; margin-top: 5px; }
#navigation li ul li a:hover {background: #c0c0c0;}

[apostrophe]

Some consistency in your css may help. You seem to have hover styles on some list items, on others you have them on the link itself and at least once you have them on both. To work with ie they should all be on the link.
Be consistent when targetting the markup eg.

Code:

ul#navigation li a

ul#navigation li ul li a

etc.

[AnotherAndrew]

Ok, I think I know what you mean, and I cleaned up my code.

Does this look better?

Code:

#navWrapper {position: absolute; top: 110px; left: 0px; z-index: 1000; background:#6b6d70; width: 1000px; opacity: 0.8; filter: alpha(opacity=80); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}
#navigation {list-style:none;font-size: 0.8125em; font-weight: bold; letter-spacing: 0.17em; text-transform: uppercase; color: #c0c0c0;zoom: 1; }

#navigation li {float:right;text-align:center; padding: 5px; }
#navigation ul {position:absolute;left:-999em;width:690px;list-style:none;line-height:0;margin-left:310px;}

#navigation a {font-weight: bold;color: #e1e1e1;display: block; text-decoration: none; padding: 10px 10px; }
#navigation a:hover {color:#fff; background: #414244;}

#navigation li li {float:right; width:auto; text-align:left; padding: 10px 10px; }
#navigation li li a {color: #fff; font-size: 0.875em; float:right; padding: 5px 8px;}
#navigation li li:hover {color:#fff;background: #c0c0c0;}

#navigation li ul li a {left:0; background: #414244; margin-top: 5px;}
#navigation li ul li a:hover {background: #c0c0c0;}

[apostrophe]

Not really no. :?
What’s going on here?

Code:

#navigation a {font-weight: bold;color: #e1e1e1;display: block; text-decoration: none; padding: 10px 10px; }
#navigation a:hover {color:#fff; background: #414244;}

#navigation li li {float:right; width:auto; text-align:left; padding: 10px 10px; }
#navigation li li a {color: #fff; font-size: 0.875em; float:right; padding: 5px 8px;}
#navigation li li:hover {color:#fff;background: #c0c0c0;}

#navigation a – that’s all links in the navigation.

#navigation li li – is that the list items in the menu or the submenu?

#navigation li li:hover – menu or submenu you are applying the hover to the list item when it should be on the anchor tag.

[AnotherAndrew]

OK, I reduced some declarations that weren’t doing anything, but causing confusion. This seems to work better.

So now I have this:

Code:

#navWrapper {position: absolute; top: 110px; left: 0px; z-index: 1000; background:#6b6d70; width: 1000px; opacity: 0.8; filter: alpha(opacity=80); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}
#navigation {list-style:none;font-size: 0.8125em; font-weight: bold; letter-spacing: 0.17em; text-transform: uppercase; color: #c0c0c0;zoom: 1; }
#navigation li {float:right;text-align:center; padding: 5px; }
#navigation a {font-weight: bold;color: #e1e1e1;display: block; text-decoration: none; padding: 10px 10px; }
#navigation a:hover {color:#fff; background: #414244;}
#navigation ul {position:absolute;left:-999em;width:690px;list-style:none;line-height:0;margin-left:310px;}
#navigation li:hover {color:#fff;background: #414244; }
#navigation li:hover ul {left:0; background: #414244; margin-top: 5px; }
#navigation li ul li a:hover {background: #c0c0c0;}

And from what I can tell this line is what is not showing up in IE:

#navigation ul {position:absolute;left:-999em;width:690px;list-style:none;line-height:0;margin-left:310px;}

[apostrophe]

Code:

#navigation li:hover {color:#fff;background: #414244; }
#navigation li:hover ul {left:0; background: #414244; margin-top: 5px; }

I don’t know any clearer way to say it. So for the third time, the hover must be on the anchor tag, not the list item, not the ul but the anchor tag.

[AnotherAndrew]

OK, OK! Please be patient! So that would give me this:

Code:

#navWrapper {position: absolute; top: 110px; left: 0px; z-index: 1000; background:#6b6d70; width: 1000px; opacity: 0.8; filter: alpha(opacity=80); -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);}
#navigation {list-style:none;font-size: 0.8125em; font-weight: bold; letter-spacing: 0.17em; text-transform: uppercase; color: #c0c0c0;zoom: 1; }
#navigation a {font-weight: bold;color: #e1e1e1;display: block; text-decoration: none; padding: 10px 10px; }
#navigation a:hover {color:#fff; background: #414244;}
#navigation ul {position:absolute;left:-999em;width:690px;list-style:none;line-height:0;margin-left:310px;}
#navigation li {float:right;text-align:center; padding: 5px; }
#navigation li a:hover {color:#fff;background: #414244; }
#navigation li ul a:hover {left:0; background: #414244; margin-top: 5px; }
#navigation li ul li a:hover {background: #c0c0c0;}

I guess I am not understanding what is making in the drop down menu work. I am just trying to work the logic out. A user hovers over the first ul li a, and then how does the second level ul li a appear?

[apostrophe]

Yes. IE6 doesn’t support hover on anything but anchor tags.

[AnotherAndrew]

OK, so I dropped that code into my site, but the sub menu does not display.

I don’t understand what in the CSS allows for the second level of navigation to appear….

[apostrophe]

Code:

#navigation li:hover ul {left:0; background: #414244; margin-top: 5px; }

Is what makes the submenu appear. For reasons beyond me it won’t work in FF if I put the hover on the anchor and although I don’t have access to IE right now I know that it won’t work there if the hover state is anywhere but the anchor tag.

Perhaps this will help http://www.xs4all.nl/~peterned/csshover.html or use jQuery.

[Skipt]

Quote:

For reasons beyond me it won’t work in FF if I put the hover on the anchor and although I don’t have access to IE right now I know that it won’t work there if the hover state is anywhere but the anchor tag.

Hi, I am Skipt over at DevShed forums where he has also posted this and am 17 years old. I searched for this thread on other forums to see if he has gott the solution yet, as I have not got to it. I joined this forum for the sole purpose of saying why putting it to a:hover won’t work. I see you are a mod so I am a little surprised because it is quite simple. The ul and li inside of the li are not descendants of the <a> so that’s why. If you were to do #navigation li a:hover+ul {left:0; background: #414244; margin-top: 5px; } then it would work, but obviously not in IE6. Just thought I would clear that up…

Cheers

BTW, it will work in IE7 and 8 if the :hover isn’t on the anchor, but WON’T work in IE6 and below if :hover is on anything but <a>’s. But that isn’t the source of his problem, his problem is in IE7 and 8. I am currently working on it now, it’s a good question because I am having trouble with it.

[Skipt]

Hey there, I fixed it. Check the thread over at DevShed

[Author]

Posts