Problème d'affichage de sous-menus CSS

Bonjour à tous,

J'ai fait quelques progrès dans la conception de mon menu et du coup je modifie ma question :

Je voudrais avoir des sous-menus avec une hauteur inférieure à celle des cases du premier niveau du menu. Est-ce que quelqu'un pourrais me dire ce que je dois modifier dans mon code css pour empêcher que mes sous-menus héritent la hauteur des cases du premier niveau?

Concrètement, voilà mon menu dans son état actuel (les sous-menus et les premiers niveaux ont la même hauteur) :


Et voici une image de ce à quoi je voudrais arriver (les sous-menus ont une hauteur inférieure) :



Merci d'avance pour votre réponse

Code HTML :

<div id="top">

<ul id="nav">
<li id="logo">Bienvenue</li>
<li><a href="http://www.ocvision.com/" class="current" title="Go to Home Page">Accueil</a></li>
<li><a href="#">Présentation</a>
<ul class="sousMenu">			      
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
	  </ul>
</li>
<li><a href="#">Formation</a>
<ul class="sousMenu">			      
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
	  </ul>
</li>
<li><a href="#">Sport</a>
<ul class="sousMenu">			      
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
	  </ul>
</li>
<li><a href="#">Réservation</a>
<ul class="sousMenu">			      
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
	  </ul>
</li>
<li><a href="#">Mediathèque</a>
<ul class="sousMenu">			      
				<li><a href="#">whisky</a></li>
				<li><a href="#">vodka</a></li>
				<li><a href="#">gin</a></li>
				<li><a href="#">vin</a></li>
				<li><a href="#">champagne</a></li>
	  </ul>
</li>
</ul>
</div>

Code CSS :

div#top {
margin : 0 auto;
padding : 0;
width : 955px;
}
ul#nav {
margin : 0;
padding : 0;
list-style : none;
}
ul#nav li#logo {
display : block;
margin : 0 5px 0 0;
width : 218px;
height : 100px;
background-image : url('../images/ocvlogo.jpg');
text-indent : -3000px;
border : none;
}
ul#nav li {
margin : 0;
padding : 0;
display : block;
float : left;
height : 24px;
text-align : center;
text-transform : uppercase;
font-size : 14px;
}
ul#nav li a {
text-decoration : none;
color : #999;
display : block;
font-weight : bold;
width : 120px;
height : 38px;
padding-top : 50px;
font-size : 70%;
background-image : url('../images/navbg-off.jpg');
background-position : bottom 0%;
background-repeat : no-repeat;
}
ul#nav li a:hover {
text-decoration : none;
color : #999;
display : block;
font-weight : bold;
width : 120px;
height : 38px;
padding-top : 50px;
font-size : 70%;
background-image : url('../images/navbg-over.jpg');
background-position : bottom 0%;
background-repeat : no-repeat;
}
ul#nav li a.current {
text-decoration : none;
color : #ff6600;
display : block;
font-weight : bold;
width : 120px;
height : 38px;
padding-top : 50px;
background-image : url('../images/navbg-on.jpg');
background-position : bottom 0%;
background-repeat : no-repeat;
}
ul#nav .sousMenu {
display : none;
list-style-type : none;
margin : 0;
padding : 0;
border : 0;
position:absolute;
}
ul#nav .sousMenu li {
float : none;
margin : 0;
padding : 0;
border : 0;
width : 118px;
border-top : 1px solid transparent;
border-right : 1px solid transparent;
}
ul#nav .sousMenu li a:link, #menuDeroulant .sousMenu li a:visited {
display : block;
color : #fff;
margin : 0;
border : 0;
text-decoration : none;
background : transparent url("../images/fondTR.png") repeat;
}
ul#nav .sousMenu li a:hover {
background-image : none;
background-color : #f2462e;
}
ul#nav li:hover > .sousMenu {
display : block;
}

Modifié par alarts (02 Nov 2008 - 12:36)