
Originally Posted by
james739
Hi, how do I remove the extra box on the right of the shopping cart option on the drop down menu?
Thanks!
That's a very common question, and the funny thing is that it isn't a "box" its just leftover space. 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:
Code:
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:
Code:
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:
Code:
div#dropMenu ul.level2 {top: 2.17em; background:#FFFFFF;z-index:1000;left:0;}
I think I'll change my next version of the template to have percentages instead of leftover right-side space.
Bookmarks