Revised CSS Flyout Menus

Last month, I posted about a method to generate vertical multi-level suckerfish css dropdowns by revising the code from HTML Dog’s Son of Suckerfish. Well, this week I have been working to implement this code into a build that I am doing, and I figured out that my original css worked great in Firefox and Safari but not in Internet Explorer 6.

Looking at this in IE6, I saw there were gaps in the list items in the first and second tiers of the navigation, but not in the third. If you click on the example here in IE6, you should see what I am talking about. After much testing, it still does not make sense to me why that would happen in the first and second tiers but not in the third. But I basically figured out what is going on.

In IE6, although the nested lists are using position: absolute to remove them from the flow of the document, a 3px space appears at the bottom of each list item, where there should be no space at all unless a margin is being set.

To correct this, all I had to do was set margin-bottom: -3px for the specific list items in my IE6 only stylesheet. However, this creates another problem because as I said the problem only occured in the first two lists but not in the second nested list. So this fix causes the second nested list to be 3px shorter on every list item.

Luckily, all we have to do to correct this problem is reset margin-bottom: 0 in the list items of the second nested list in your IE6 only stylesheet. Now you will have flyout css menus that look as good in IE6 as they do in Firefox and Safari!