HTM CSS

Bonjour,

J'ai un petit problème de css...

Le voici:

.divMenu {
background-color: #2B9431;
width: 100%;
margin-top: 20px;
}

#Nav {
padding: 0;
list-style: none;
height: 30px;
line-height: 30px;
}

#Nav li {
width: 20%;
background: #2B9431;
margin: 0;
float: left;
padding: 0;
text-align: center;
}

#Nav li a {
display: block;
background-color: #555;
color: white;
text-decoration: none;
margin: 0;
height: 25px;
line-height: 25px;
}

#Nav li a:hover,#Nav li a:active {
display: block;
background-color: #777;
color: white;
text-decoration: none;
margin: 0;
width: 100%;
}

.Menu {
padding: 0;
list-style: none;
display: none;
width: 100%;
}

et voici le html associé:

<div class="divMenu">
<ul id="Nav">
<li>
About
<ul class="Menu">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
</ul>
</li>
<li>
Agenda
</li>
<li>
membres
<ul class="Menu">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</li>
<li>
répértoire
<ul class="Menu">
<li><a href="#">guggen</a></li>
<li><a href="#">percu</a></li>
</ul>
</li>
<li>
photo
<ul class="Menu">
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
</li>
</ul>
</div>

Le problème est que si je met la taille de #Nav li à 20%, les sous menus sont également à 20%... Comment faire pour que les sous menu prennent la largeur complète du menu???

Merci d'avance!