When I first started designing website around 1996 or so, I did not have fancy programs like Dreamweaver to guide me through the process. A typical session involved the Windows notepad, lots of “Save As” and refreshing in the browser. Here I am 14 years later and I love using Dreamweaver. It’s not my sole tool for designing websites. I still use free options when I feel the need. However, Dreamweaver makes certain things much easier. One of them is CSS/Spry menus.
The Spry menu is a very quick and handy way to add a fancy CSS menu to your site design and it works very well with one caveat. That would be Internet Explorer. IE manages to screw up an otherwise beautiful horizontal CSS menu by displaying the submenu items incorrectly. In a typical scenario the submenu would be displayed as a vertical list of items. IE would rather display this as a horizontal block of items. Now ideally the best solution would be to have the user view your site in Firefox or Chrome but that’s not going to happen. The easiest solution is to add the following line of code to your CSS page that links to the menu.
ul.MenuBarHorizontal li ul li{
clear: left;
}
That’s it. Your menu should now appear correctly in all versions of IE.