hi i have a drop down menu which i acquired from some site a while ago and have been playing with it for a while now.
i have customized and used cheap shortcuts to fixing many of the problems i face but the size of the drop down is way too much. and i fluctuates with a padding size i adjusted to widen the whole menu which appears before hovering.

so my problem is with the width of the drop down only, i would greatly appreciate any and all help. the link to athe working site is here

and the css code im using is..
#nav { clear: both; padding: 0; margin: 0; width: 920px; height: 28px; background: transparent url(http://s3.amazonaws.com/os_extranet_images/163780_original.gif) no-repeat; } #nav li a, #nav li { float: left; position: relative; left: 15px; } #nav li { list-style: none; position: relative; } #nav li a { padding: 6px 56.2px; text-decoration: none; color: white; font: bold 13px/16px 'Trebuchet MS', 'Helvetica Neue', sans-serif; background: ; border-right: 0px solid #3c3c3c; border-left: 0px solid #292929; border-bottom: 0px solid #232323; border-top: 0px solid #545454; } #nav li a:hover { background: #2a0d65; background: -moz-linear-gradient(top, #11032e, #2a0d65); background: -webkit-gradient(linear, left top, left bottom, from(#11032e), to(#2a0d65)); } /* Submenu */ .hasChildren { position:absolute; width: 5px; height: 5px; background: white; right : 5px; bottom: 10px; } #nav li ul { background: ; display: none; position: absolute; left: 15px; top: 100%; padding: 0; margin: 0; } #nav li:hover > ul { display: block; } #nav li ul li, #nav li ul li a { background: transparent url(http://s3.amazonaws.com/os_extranet_images/163779_original.gif) no-repeat; display:block; position:static; } #nav li ul li { _display: inline; /* for IE6 */ } #nav li ul li a { width: 150px; height:15px; display: block; }