Problem with CSS drop-down menu

Hello all,
and thanks in advance for your reply,

I have a problem with a drop-down horizontal css menu. The problem is that the submenus doesn't appear correctly.
Can someone take a look at my css & html code and on the screenshot and tell me where is the problem?
PS : I would like the submenus to have a smaller height than the first level of the menu.

Screenshot :


HTML code :

<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 (markup):

CSS code :

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;
}
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;
}

Code (markup):

 

Let me reword my question to make it clearer :

The menu appears like this for the moment :



But I would like it to appear like on the image below :



Can someone tell me what I should change in my css code to obtain this result? Thanks in advance.

 

Add this to your subnav hover CSS.

z-index: 1;
position: relative;

HTML:

and this to your Actualite div:

z-index: 0;
position: relative;

HTML:

 

To add on what's been said, z-index is basically the 'stacking order' - the higher z-index is on top, the lower z-index is on the bottom. By manually setting a z-index you can change the default order around. You must make it position (either relative or absolute) for it to work.

In your problem the div is on top of the menu, so by setting a higher z-index on the menu then on the div, the menu will go on top