Re: CSS Drop Down Menu

[thomas]

Yeah, you won’t be able to use inline-block if you need to support IE6 and IE7. Floating the top-level <a>s is probably the best alternative.

The reason you don’t want inline <a>s is that you want to be able to give them a width and height, since the clickable area is usually larger than just the text.

Basically, a CSS drop-down menu boils down to the following:

• Relatively (or absolutely) positioned <li>s with block-level anchors inside (they must use position:relative/absolute in order for the drop-down menus to be positioned in relation to them)
• Hidden second-level <ul>s (usually hidden with display:none) that are absolutely positioned in relation to their containing <li>
• Use of a :hover selector on the parent <li> that causes the second-level <ul> to be visible (usually with display:block)