[RÉGLÉ] Menu horizontal déroulant

[nini13]

Salut à tous,

J'ai un problème avec mon menu horizontal déroulant.
Ce dernier quand il déroule pousse vers le bas le fil d'ariane et le reste des div.

je vous donne mon code html et css, merci de votre aide.
J'ai pensé a mettre du z-index mais je n'y arrive pas

<div id="menus">
<ul class="menu">
<li class="item-101 current active">
<a href="/joomla_sans_exemples/">Accueil</a>
</li>
<li class="item-102 deeper parent">
<a href="/joomla_sans_exemples/index.php/pao">PAO</a>
<ul>
<li class="item-105">
<a href="/joomla_sans_exemples/index.php/pao/photoshop">Photoshop</a>
</li>
<li class="item-106">
<a href="/joomla_sans_exemples/index.php/pao/illustrator">Illustrator</a>
</li>
<li class="item-107">
<a href="/joomla_sans_exemples/index.php/pao/indesign">Indesign</a>
</li>
</ul>
</li>
<li class="item-103">
<a href="/joomla_sans_exemples/index.php/internet">Internet</a>
</li>
<li class="item-104">
<a href="/joomla_sans_exemples/index.php/bureautique">Bureautique</a>
</li>
</ul>
</div>  <div class="clr"></div>

  <div id="ariane">Placez ici le contenu de  id "ariane"</div>

------css

#menus {
	height:50px;
	background-color: #C06;
}
#menus ul {
	margin:0;
	padding:0;
	list-style-type:none;
	text-align:center;
}
#menus li {
	float:left;
	margin:auto;
	padding:0;
	background-color:black;
}
#menus li a {
	display:block;
	color:white;
	text-decoration:none;
	height: 40px;
	padding: 5px;
	line-height: 40px;
	width: 125px;
}
#menus li a:hover {
	color:#FFD700;
	background-color: #999;
}
#menus ul li ul {
	display:none;
}
#menus ul li:hover ul {
	display:block;
}
#menus li:hover ul li {
	float:none;
	background-color: #666;
}

<!--[if !IE]> <-->

#menus li ul {
position:absolute;
}

<!--> <![endif]-->
<!--[if IE 8]>

#menus li ul {
position:absolute;
}

<![endif]-->

.clr {
	clear : both;
}

[nini13]

Re : Menu horizontal déroulant

J'ai résolu mon problème avec

#menus ul li ul {
display:none;
position: absolute;
z-index: 1000;
}