CSS Dropdown menu for the header- With Categories!

[jettrue]

Hello, first, thank you for the Add-on it is great. I have a couple of issues I need to fix with it though.

http://www.greatgolfdepot.com

I saw someone mention something about Internet Explorer. In IE the menus do not come down aligned, but they are off centered to the right slightly. It works great in Firefox though.

My second problem, which is a little worse, is the area directly to the right of the Shopping Cart tab. There is extra space there that I cannot figure out how to remove. I tried even adding margin-right: -10px; to the CSS and it won't move. Is there something I am doing wrong or missing?

Thanks!
Dan Paplaczyk
http://www.GreatGolfDepot.com

Since you want your menu to fill up all the way from left to right, I would suggest using percentages for the widths of each menu item. This is because the menu was designed to have a right-side space, so that when people enlarge the font, the menu doesn't end up wrapping into two lines. But making the menu items a percentage, it won't wrap into two lines.

So, first, you need to change div#dropMenu li to this:

div#dropMenu li {
	position: relative; 
	list-style: none; 
	margin: 0; 
	float: left; 
	line-height: 1em;
        width:16.667%;
	}

Then change div#dropMenu li a to this:

div#dropMenu li a {display: block; padding: .6em 0 .6em 0;text-decoration: none; text-transform:uppercase; color:#005f00; text-align:center; border-right:1px solid #005f00; border-left:1px solid #005f00;}

Then change div#dropMenu ul.level2 to this:
div#dropMenu ul.level2 {top: 2.17em; background:#FFFFFF;z-index:1000;}

div#dropMenu ul.level2 {top: 2.17em; background:#FFFFFF;z-index:1000;left:0;}

And I think the last section I just posted will help with your IE problem as well.