Problème dans code menu en css

Bonjour,
J'ai créé un menu horizontal-horizontal.

J'ai un souci, c'est que la deuxième ligne de menu ne change pas en fonction du pointage de la première (ce que je souhaite évidemment) de la première.

D'autre part, je me demande comment adapter la longueur des célulles de ce menu à leur contenu.

Merci de m'aider

Voici le code que j'ai utilisé (dans une feuille css)

<!--Menu déroulant-->
#navlist
{
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border-bottom: 3px solid #f63;
white-space: nowrap;
}

#navlist li
{
float: left;
margin: 0 0 0 2px;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #aaa #555 #f63 #999;
list-style-type: none;
}

#navlist li a
{
position: relative;
width: 6em;
display: block;
margin: 0;
padding: 1px 0.4em;
border-width: 1px 1px 0 1px;
border-style: solid;
border-color: #ccc;
background-color: #eee;
color: #666;
font: normal 0.7em/120% Verdana, Arial, Helvetica, sans-serif;
text-align: center;
text-decoration: none;
}

#navlist li a:hover
{
color: #00c;
text-decoration: underline;
}

#navlist li#active a
{
font-weight: bold;
background-color: #f63;
color: #fff;
border-color: #f96 #c30 #f63 #f96;
}

#navlist li#active a:hover { color: #fff; }

#navlist ul#subnavlist
{
position: absolute;
width: 100%;
left: 0;
top: 1.25em;
height: 0.75em;
margin: 0;
padding: 0;
border-bottom: 3px solid #f63;
white-space: nowrap;
}

#navlist ul#subnavlist li
{
width: 14ex;
margin: 0;
border: 0;
}

#navlist ul#subnavlist li a
{
width: auto;
padding: 0.06em 1em 0;
border: 0;
background-color: #fff;
color: #000;
font: normal normal 0.66em/110% Verdana, Arial, sans-serif;
}

#navlist ul#subnavlist li a:hover
{
color: #00c;
text-decoration: underline;
font-weight: 400;
/* IE5/Mac disappearing item fix */
}

#navlist ul#subnavlist li#subactive a
{
background-color: #fc9;
color: #000;
}

* html > body #navlist, * html > body #navlist ul#subnavlist
{
width: 600px;
/* IE5/Mac fixed width fix */
}


Mais le problème vient peut-être du html.
Le voici :

<!-- menu déroulant-->
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Acceuil</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Actualité</a></li>
<li><a href="#">Calendrier</a></li>
<li><a href="#">Lettre d'information</a></li>
<li><a href="#">Subitem four</a></li>
</ul>
</li>

<li><a href="#">Qui sommes nous ?</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">L'Ensemble Entheos</a></li>
<li><a href="#">Benoît Damant</a></li>
<li><a href="#">Les musiciens</a></li>
<li><a href="#">Les artistes partenaires</a></li>
<li><a href="#">Revue de presse</a></li>
</ul>
</li>

<li><a href="#">Répertoire</a></li>

<li><a href="#">Pédagogie</a></li>

<li><a href="#">Médias</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Extraits sonores</a></li>
<li><a href="#">Les photos</a></li>
<li><a href="#">Les vidéos</a></li>
</ul>
</li>

<li><a href="#">Nous soutenir</a></li>

<li><a href="#">Boutique</a></li>

<li><a href="#">contact</a></li>
</ul>
</div>

<!--fin de menu déroulant-->