[CSS]menu déroulant sur une ligne

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>

les style css correspondants:

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

merci par avance pour votre aide