css flyout header stylesheet customization

[kbalona]

Hi, if you go to my site www.edgeandengine.com/store, you'll see that I am using the CSS Horizontal Dynamic Menu (Paul's Edition). My problem is that I want to center the flyout links, and I can't figure out how. (Right now all the links left-aligned) I'm sure it's something in the stylesheet, but I suck at CSS. Here's the stylesheet:

body {  
    behavior: url(includes/csshover.htc);
    }
    
/*green*/
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover {color: #4f4f4f!important;background:#D5E88F;}


/*blue
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#6C99D9;}
*/ 

/*red 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #ffffff!important;background:#DC262E;}
*/ 

/*grey 
div#dropMenu li a:hover, div#dropMenu li.submenu li.submenu:hover, div#dropMenu ul.level2 a:hover {color: #4f4f4f!important;background:#D5D5D5;}
*/
    
#dropMenuWrapper {
    width:100%;
    height:25px;
    margin:0;
    font-size:11px;
    }
    
div#dropMenu {
      width:830px;
      margin:0 auto;
    text-align:center;
    z-index:1000;
    position:relative;
    }

div#dropMenu ul {
    margin: 0; 
    padding: 0;
    }
    
div#dropMenu li {
    position: relative; 
    list-style: none; 
    margin: 0; 
    float: left; 
    line-height: 1em;
    }
    
div#dropMenu ul.level1 {
    width:830px; 
    margin:0 auto; 
    text-align:center;
    background:#4F4F4F;
    height:25px;
    z-index:1000;
    }
    
div#dropMenu li:hover {}
div#dropMenu li.submenu {}
div#dropMenu li.submenu:hover {}
div#dropMenu li a {display: block; padding: 7px 25px ;text-decoration: none; text-transform:uppercase; color:#ffffff; text-align:center; border-right:1px solid #ffffff;} 
div#dropMenu>ul a {width: auto;}
div#dropMenu ul ul {position: absolute; width: 13em;display: none;}
div#dropMenu ul ul li {border-bottom: 1px solid #CCC; width:13em;}
div#dropMenu li.submenu li.submenu {}
div#dropMenu ul.level1 li.submenu:hover ul.level2, 
div#dropMenu ul.level2 li.submenu:hover ul.level3,
div#dropMenu ul.level3 li.submenu:hover ul.level4,
div#dropMenu ul.level4 li.submenu:hover ul.level5 {display:block;z-index:1000;}
div#dropMenu ul.level2 {top: 2.17em; background:#4f4f4f;z-index:1000;}
div#dropMenu ul.level3, div#dropMenu ul.level4, div#dropMenu ul.level5 {top: 0; left: 13em; background:#4f4f4f}
div#dropMenu ul.level2 a {padding: 0.5em 0.25em;color: white; text-transform:none;}  /* this is text color on drop-down submenu */
div#dropMenu ul.level2 a:hover {color:#4f4f4f;}

I'd appreciate any help

[kobra]

Looked and the text in the drops all look to be centrered...

Did you get this sorted?

[kbalona]

I guess I didn't make it to clear what I meant, sorry. The links are centered OK individually (between the white vertical lines) but what I wanted to do is center all the links in the middle of the main bar. For instance, the Shindaiwa link is against the left side. On the right side, there's a space after the last link (Manuals). I'd like to even out those spaces.
If I'm not clear yet, just ask more questions...

[kobra]

For instance, the Shindaiwa link is against the left side

Yes, and this is as far left as the layout will allow

Opps!!! Are these all the top links you will ever have?

[kbalona]

Yes, and this is as far left as the layout will allow

Opps!!! Are these all the top links you will ever have?

Well, not necessarily, but I thought it looks a little funny with so much space on the right side. But if you don't think it does look funny, I'll just leave it

[kobra]

Try this in your drop menu css file they exist just edit/add what is in red:

#dropMenuWrapper {
background: #4F4F4F;
	width:100%;
	height:25px;
	margin:0;
	font-size:11px;
	}

div#dropMenu {
  	width:678px;
  	margin:0 auto;
    text-align:center;
	z-index:1000;
	position:relative;
	}

div#dropMenu ul.level1 {
	width:678px; 
	margin:0 auto; 
	text-align:center;
	background:#4F4F4F;
	height:25px;
	z-index:1000;
	}

[kbalona]

Thanks a lot, that just about did the trick, with a little tweaking. When I did it exactly like that, it stuck out a little too far on the sides (It actually stayed with the template, but because of the shadows on the sides, it looked funny). Then when I tried to set it to say, 95%, the whole menu bar became slightly off center. So I played around a little until I got it perfect, but I put that first code section like this:

#dropMenuWrapper {
	background: #4F4F4F;
        width:827px;
	height:25px;
	margin:0px 0px 0px 8px;
	font-size:11px;
        }

That's probably a cruel usage for the "margin" line, but it bumped it over enough to come out perfect:) Will there be any problems with that, do you know?
Thanks again.

[kobra]

This all in one margin line is supported and should be no issue