Are CSS based menus simply toggling display none/block and z-index?

Question

Hi,

Just trying to understand how to get drop down menus to work (the theory behind them).

From what I have seen, it is just playing around with CSS using display:none and block along with the z-index.

Events are attached on mouseover and mouseout to switch the CSS class.

Is that basically it?

Answer 1

CSS menus can also take advantage of the :hover property on the anchor tag, which will work in the same fashion as a mouseover/mouseout event.

Edit: I should probably say that the :hover property doesn't always have to be on the anchor tag, but it is the most widely used.

Answer 2

There's an alternative where you can make give menu items visibility dependent on the hover style of the parent element, eg.

li ul {display: none;}  
li:hover > ul {display: block;}

this means you can make menus simply by using

<ul id="menu">
    <li>
        some item
        <ul><li>sub item</li></ul>
    </li>
    <li>
        some other item
    </li>
<ul>

Obviously you'll want to throw in more styling, and classes, etc to prevent it applying to all lists, but that's the general concept behind a css menu.

Answer 3

The menu bar is a horzontal <ul> with a <li> for each drop down menu

The drop downs are a vertical <ul>

Special .css stuff required:

• For <li> use "list-style: none" to get rid of bullets etc

• For <li> use "display: inline;" for horizontal layout instead of default vertical

• For <a> inside of <li> for the actual clickable menu items, use "padding: 10px 20px;" (or other dimensions) to make a bigger mouse target area

Answer 4

It might help with getting the overall picture to understand why the onmouse(out|over) events and/or the hover class are only applied to the menu items which have children and not the regular menu items. That's because they, while being visually away from their parent, still remain inside their parent semantically. So when your mouse moves out of the parent menu item into its children, the parent is still considered having the mouse hovered over it.