Re: Navigation Menu – Making Drop Down Links Invisible & Visible On Mouseover?

[Senff]

Technically, what you’re doing is almost OK, except that you shouldn’t make them invisible by default and then visible on hover. Any item set to invisible still takes up space on the page, and can be interacted with — it just can’t be seen. When you set it to display:none, it will not be part of the page. It’s not there, and it can’t be interacted with (even though it’s still in the code).

Give the #menu li ul the property display:none; by default and then give it display:block when you hover over the LI that contains it. So, in essence:

#menu li ul {

display:none;

}



#menu li:hover ul {

display:block;

}

Of course there's a lot more to it, but that's basically the idea.

Instead of display:none; and display:block;, some people position the submenu UL absolutely -- about -99999px by default (so it's off-screen) and then at 0 on hover.