auto width on hover?

[sw9]

I'm creating some hover menus where I want the hover menus to expand out in width to fit whatever the line items are on one line, but the width seems to be getting controlled by the previous menu. The only way I can seem to get it to work is if I give the hover ul a set width rather than trying to let it do it automatically. It seems like I'm just doing something wrong. I'm attaching two screenshots on how it looks now and how I want it to look. Here is my css-related code:

 

/* the top level menu bar */
ul.nice-menu {
border-top:none;
background: #971e20;
width: 970px;
height: 26px;
}

/* the top menu li's */
ul.nice-menu-down li,
ul.nice-menu-down li.menuparent {
border-top:none;
font-weight: normal;
font-size: 14px;
background: #971e21;
border-left: none;
border-bottom: none;
}

ul.nice-menu-down .menuparent a {
padding-right: 38px;
}

ul.nice-menu-down li a {
display:block;
padding:5px 38px;
}
}

ul.nice-menu li,
ul.nice-menu-down li.menuparent {
background: #971e20;
border: none;
border-right: 1px solid #fff;
}

ul.nice-menu li.last {
border-right: none;
}

/* top menu hovers */

ul.nice-menu-down li.menuparent:hover,
ul.nice-menu li:hover{
background: #80191b;
}

/* second (hover) ul **/
ul.nice-menu ul {
top: 26px;
background: #3c529b;
}

ul.nice-menu ul li {
width: auto;
padding: 0;
background: #3c529b;
}

ul.nice-menu ul li a {
padding: 5px 10px 5px 20px;
}

 

[attachment deleted by admin]