[CSS]menu déroulant sur une ligne [Résolu/Fermé]

Signaler
Messages postés
68
Date d'inscription
mercredi 19 juillet 2006
Statut
Membre
Dernière intervention
5 octobre 2010
-
Messages postés
68
Date d'inscription
mercredi 19 juillet 2006
Statut
Membre
Dernière intervention
5 octobre 2010
-
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

2 réponses

Messages postés
339
Date d'inscription
lundi 9 juillet 2007
Statut
Membre
Dernière intervention
9 août 2011
68
slt!

Tu as juste à rajouter une largeur à ta div menu:

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

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 57435 internautes nous ont dit merci ce mois-ci

Messages postés
68
Date d'inscription
mercredi 19 juillet 2006
Statut
Membre
Dernière intervention
5 octobre 2010
11
merci jcbetin, ça marche. mais j'ai abandonné ce code et j'ai fait un autre car celui là je l'ai testé sur un machin qui s'appelle Maxthon (un navigateur) et il ne s'afiche pa bien même avec width fixé. J'ai opté pour une solution avec un tableau pour le menu principal et j'ai pa touché aux ss menus.

merci pour m'avoir répondu.