Adapter menu déroulant à la taille fenêtre

Bonjour,

Nous avons un site internet à rendre pour un projet scolaire mais nous avons un soucis de menu déroulant :(
Il faudrait que la largueur du menu déroulant s'adapte à la taille de la fenêtre et impossible de mettre la taille en %, cela ne fonctionne pas :/

Voici le code HTML :
<nobr><div id="menuderoulant">
<ul>
<li><a href="accueil.html">Accueil</a>
</li>
<li><a href="#">Visite par thèmes</a>
<ul>
<li><a href="eaux_themes.html">Cransac-Les-Eaux</a></li>
<li><a href="mines_themes.html">Cransac-Les-Mines</a></li>
<li><a href="thermes_themes.html">Cransac-Les-Thermes</a></li>
</ul></li>
<li><a href="#">Fonds du musée</a>
<ul>
<li><a href="Galerie.html">Galerie photographies</a></li>
<li><a href="Recherches avancées.html">Recherches avancées</a></li>
</ul>
</li>
<li><a href="Livre d'or.html">Livre d'Or</a></li>
<li><a href="#">Informations pratiques</a>
<ul>
<li><a href="Contacts.html">Crédits</a></li>
<li><a href="Credits.html">Présentation du DAM</a></li>
<li><a href="Presentation DAM.html">Remerciements</a></li>
<li><a href="Remerciements.html">Contacts</a></li>
</ul>
</li>
</ul>
</div></nobr>

Et le code CSS :
#menuderoulant, #menuderoulant ul /* Liste */
{
padding : 0;
margin : 0;
list-style : none;
line-height : 21px;
text-align : center;
}

#menuderoulant /* Ensemble du menu */
{
float:left;
position: absolute;
height:100%;
font-weight : bold;
font-family : Arial;
font-size : 12px;
}

#menuderoulant a /* Contenu des listes */
{
display : block;
padding : 0;
background : #000;
color : #fff;
text-decoration : none;
width : 212px;
}

#menuderoulant li /* Éléments des listes */
{
float : left;
border-right : 1px solid #fff;
display:inline;
}

html>body #menuderoulant li
{
border-right: 1px solid transparent ;
}

#menuderoulant li ul /* Sous-listes */
{
position: absolute;
width: 212px;
left: -999em;
}

#menuderoulant li ul li
{
border-top : 1px solid #fff;
}

html>body #menuderoulant li ul li
{
border-top : 1px solid transparent;
}

#menuderoulant a:hover
{
color: #000;
background: #fff;
}

#menuderoulant li:hover ul, #menuderoulant li li:hover ul, #menuderoulant li.sfhover ul, #menuderoulant li li.sfhover ul
{
left: auto;
min-height: 0;
}



C'est à se taper la tête contre les murs !

Merci beaucoup pour votre aide ! :)