ul menu with different bg

[niha]

Hi everyone, i am getting crazy with a ul menu in css.
all i am trying to do is change the background image on mouse over according to the link size, the first 2 tabs are small but the 3, 4, 5 tab have differnt width! and i cant stretch the bg. I tried doing certain classes for each link but when i go over the dropdwn links the top bg disappear. this is handeld at the bottom of the code under /*Root Menu Hover Persistence*/ here is the code and here is my link http://213.215.170.78/engineering/css3.html


/**MENU drop down**/

ul#navmenu {
padding-left:20px;
margin-left:20px;
border: 0px none;
list-style: none;

}

ul#navmenu ul {
margin: 0px;
border: 0px none;
padding: 5px;
padding-top:8px;
width:195px;
height:117px;
list-style: none;
display: none;
position: absolute;
top: 1.37em /*22px*/;
left: 0px;
background-image:url(../images/Menu_2/box_ChiSiamo_Content.jpg);
z-index:10;
}

ul#navmenu ul li {
width: 140px;
padding: 0px;
padding-left:5px;
margin: 0px;
text-align: center;
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/

}


/***top cap of menu**/
ul#navmenu li {
margin: 0px;
border: 0px none;
padding: 0px;
float: left; /*For Gecko*/
display: block;
list-style: none;
position: relative;
text-align: center;


}

/* Root Menu */
ul#navmenu li.hiLight {
display: block;
background: url(../img/navbar/backMenuHiLight.gif);
border-right: 1px solid #FFFFFF;
color: #FFFFFF;
padding: 0px;
margin: 0px;
text-align: center;
}
ul#navmenu li a {

padding: 0px;
margin: 0px;
text-align: center;
float: none !important; /*For Opera*/
float: left;/* For IE*/
display: block;
font: 11px/22px Arial, Helvetica, Verdana, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/

}


/* First */
ul#navmenu li.first {

padding: 0px;
margin: 0.4em/* 5px*/;
text-align: center;
font-weight:bold;
background-image:url(../images/Menu_2/drpdwn_menu_off.jpg);
background-position:bottom right;
background-repeat:no-repeat;

}

ul#navmenu li.first a {
font-weight: bold;
color: #C50944;
min-width:70px;
width:100%;
padding-bottom:5px;

}
ul#navmenu li.first a:hover {
font-weight: bold;
color: #2b2b2b;
width:100%;
min-width:70px;

}


ul#navmenu li ul a {
padding: 0px 0px 0px 6px;
width: 135px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
font-weight: bold;
color: #000000;
font: 11px/22px Arial, Helvetica, Verdana, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}


/* Root Menu Hover Persistence */
ul#navmenu li:hover a {
background-image:url(../images/Menu_2/top.gif);
background-repeat:no-repeat;
width:100%;
font-weight: bold;
padding: 0px;
z-index:4;}

ul#navmenu li.iehover a {
background: url(../images/Menu_2/top.gif) no-repeat 0px 0px;
width:100%;
font-weight: bold;
padding: 0px;
}

ul#navmenu a:hover, ul#navmenu li:hover a, ul#navmenu li.iehover a {
background: url(../images/Menu_2/top.gif) no-repeat 0px 0px;
width:100%;
font-weight: bold;z-index:4;

}

/* 2nd Menu */
ul#navmenu li:hover li a.more, ul#navmenu li.iehover li a.more {
background: url(../img/navbar/backMenuArrow.gif) no-repeat 0px 0px;font-weight: bold;
}
ul#navmenu li:hover li a, ul#navmenu li.iehover li a {
background: url(../img/navbar/backMenuStandard.gif) repeat-x 0px 0px;
font-weight: bold;
float: none;

text-align:left;
border: 0px none;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul, ul#navmenu li:hover ul ul ul, ul#navmenu li.iehover ul ul, ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul, ul#navmenu ul li:hover ul, ul#navmenu ul ul li:hover ul, ul#navmenu li.iehover ul, ul#navmenu ul li.iehover ul, ul#navmenu ul ul li.iehover ul {
display: block;

}