28173 sujets

CSS et mise en forme, CSS3

[Résolu] Menu déroulant horizontal

Bonjour à tous !

Les tutoriaux d'Alsacréations sont très bien fait et m'ont beaucoup dépanné ! Cependant, j'ai un tout petit souci.
J'ai utilisé le menu déroulant horizontal : http://css.alsacreations.com/xmedia/exemples/deroulant/menu-horizontal.htm, qui est très très bien ! Il fonctionne impeccable, mais je n'arrive pas à le center. J'ai beau bidouiller le code CSS mais rien à faire ! En plus, je suis sûre que c'est tout bête.

Code CSS :
[code]<style type="text/css" media="screen">
<!-- 
body {
margin: 0;
padding: 0;
background: white;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* placement du menu, à modifier selon vos besoins */
top: 0;
left: 0;
z-index:100;
width: 100%; /* correction pour Opera */
}
#menu dl {
float: left;
width: 12em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
background: #eee;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid gray; 
}
-->
</style>


Code HTML :
[/code]
<div id="menu">
	<dl>
		<dt onmouseover="javascript:montre();"><a href="" title="Retour à l'accueil">Accueil</a></dt>

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

					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>

					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>

			</dd>
	</dl>
	
	
	<dl>	
		<dt onmouseover="javascript:montre();"><a href="">Menu 2</a></dt>
	</dl>

	
	<dl>	
		<dt onmouseover="javascript:montre('smenu3');">Menu 3</dt>
			<dd id="smenu3">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>

					<li><a href="#">Sous-Menu 3.5</a></li>
				</ul>
			</dd>
	</dl>
	
	<dl>	
		<dt onmouseover="javascript:montre('smenu4');">Menu 4</dt>

			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
					<li><a href="#">Sous-Menu 4.2</a></li>

					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
	

</div>


Comment faire ?

Merci beaucoup d'avance pour votre aide !

Angélique
Modifié par VaeVictis (23 Jun 2007 - 18:59)
Bonsoir overflow !

Merci beaucoup de m'avoir répondu ! Smiley cligne
Mais je ne suis pas encore une très grande pro dans les codes. J'ai fait des tests avec ce que tu m'as dis, mais ça ne fonctionne pas. J'oublie sûrement quelque chose.
Pourrais-tu me détailler tout ça ? Tu serais super sympa !

Encore merci !

Angélique
Bonsoir à tous !

Ca y est, le problème est réglé

J'ai essayé ça, et ça fonctionne impeccable !



<div style="width:800px; position:relative; left:50%; margin-left:-400px" id="menu"></div>


Angélique
Sujet clos
Aller à