CSS pulldown menus, the trick

The real trick to css pulldown menus is the :hover pseudo selector. You knew that. However, the insight comes in learning that the :hover pseudo can be used anywhere in the middle of your CSS selector. This allows you to build up the a selector representing a mouse action that selects a child element of what the mouse it on.

Here is some html:

(span id="menu")
(h3)a category(/h3)
(ul)
  (li)item 1(/li)
(/ul)
(/span)

Now here is how you hover over the over H3 to get the sub menu to raise:

#menu {
   width: 2in;
   height: 2em;
   position: relative;
}
#menu ul {
   display: none;
   position: absolute;
}
#menu h3:hover ul {
   display: block;
}
#menu ul:hover {
   display: block;
}

That h3:hover ul trick is gold!

%d bloggers like this: