Best CSS3 Drop Down Menu Tutorial

css3, drop down menu, modernizer, html5 shiv

Avoided drop down menu for a long time since many didn’t work right. Now I found many good sites to get a ready-to-go CSS style for it. However, I needed to know what’s going on under the hood, easier on me during debugging.

I learn coding by trying things out in stages and found the tutorial on CSS Menu Maker to be most clear.

As it stated at the end, IE8 doesn’t get it. Since my page is in HTML5, I added a javascript from Modernizer first.

Now I have a nice navigation bar but two more things still didn’t work in IE8 :

  • The rounded corner
  • The shadow for the hover state

I didn’t waste time to fix the rounded corner but the hover state in the submenu has to be fixed. Visitors need to see a reaction to their action.

So, I added a darker background for the submenu items for the hover state at the end of the stylesheet. The /9 is a hack for IE8 and below. Be sure to replace “color” with your own hex code.

.menu li ul a:hover {
background: #color\9;
}