Salut tt le monde,
j'ai un menu déroulant horizontale (et les ss menus s'affichent sur une seule ligne)
le menu fonctionne très bien mais le problème c'est qu'il s'adapte à la taille de l'écran: quand je réduit l'écran le menu s'affiche sur plusieurs lignes or les ss menus s'affichent toujours sur 1 seule ligne
voici le code html

<div id="menu" >

	<dl>
		<dt onmouseover="javascript:montre();" style="border-left:0px;"><a href="home.html" title="Home" ><font color="#FFFFFF">Home </font></a></dt>

	</dl>	
	<dl >			
		<dt onmouseover="javascript:montre('smenu1');" ><a href="#">Services</a></dt>
			<dd id="smenu1" onmouseover="javascript:montre('smenu1');" >
				<ul  >
					<li ><a href="" >service 1</a></li>

					<li ><a href="">service2</a></li>					
					<li ><a href="">service 3</a></li>					
					<li ><a href="">service 4</a></li>
		
					
				</ul>

			</dd>
	</dl>		
	<dl >			
		<dt onmouseover="javascript:montre('smenu2');" ><a href="#">Cases</a></dt>
			<dd id="smenu2" onmouseover="javascript:montre('smenu2');" >
				<ul  >
					<li><a href="" >case 1</a></li>
					<li ><a href="">case 2</a></li>					
					<li ><a href="">case 3</a></li>					
					<li><a href="">case 4</a></li>					
				</ul>
			</dd>
	</dl>
</div>

#menu {
z-index:100;
position:absolute;
left:300px;
top:240px;
font: 80% verdana, arial, sans-serif;
background-color:#000000;

}


#menu dl {
float: left;
width: 10em;
}


#menu dt {
font-weight: bold;
background-color:#000000;
border-left: 5px solid #ce130a ;
border-top:5px solid #ce130a ;
height: 30px;
line-height: 30px;
}
#menu dt a {
	margin-left:30px;
}


#menu li {
text-align: center;
background: #000000;
border-right:1px solid #ce130a;
}

#menu li a {
height: 30px;
line-height: 30px;
color: #FFFFFF;
text-decoration: none;
}
 #menu dt a {
color: #FFFFFF;
text-decoration: none;
height: 100%;
border: 0px;
}






#smenu1,#smenu2, #smenu3 {
position: absolute;
left: 35px;
top:37px;
font-size: 12px;
width: 725px;
padding:8px;
background:#000000;

}

#smenu1 li, #smenu2 li, #smenu3 li  {
display: inline;
padding-left:14px;
padding-right:14px;
}


 {
display: inline;
padding-left:14px;
padding-right:14px;
}






#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #ce130a ;}