Menu dropdown is one of the feature that almost every today webs have and it is one of the most popular feature used in the web. In past, such feature need Javascript event. Such as using onMouseOver or onMouseOut event. However, since CSS introduced, the new psuedo classes now have this ability. Also, this solution is work for all major browser, except, of course for the CSS3 juice added, which is currently only worked on web-kit browser such as Chrome and Safari. 🙂

Here is the menu result

This is pure CSS, without any single Javascript involved. If you was using webkit browser, you will see a nice transition effect. The CSS 3 juice added here is border-radius, transition-property and transition-duration.

The trick for dropdown is done by using relative and absolute positioning. As you might know already, absolute position element is positioned relative to the parent that has position other than static. So, if we have relative position as the parent, absolute position element will get the position relative to the parent.

To hide and show the absolute child element, we use the :hover state. This worked fine on all major browser, except for the old IE 6, since the IE 6 can’t have :hover state work on all other element than a (anchor tag).

Now that CSS 3 has come, why bother with old browser anymore? 🙂