18041 sujets

Questions générales et questions de débutants

Mon menu horizontal reste vertical

Bonsoir à tous,

j'ai suivi attentivement le tutoriel pour faire un menu horizontal, j'ai tout lu consciencieusement et j'ai fait tout ce qui était expliqué, mais mon menu reste obstinément vertical...

La page avec le menu

Mon CSS : 

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: #FFFFFF;
border: 1px solid gray;
margin: 1px;
}
#menu dd {
display: none;
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #ffffff;
}
#menu li a, #menu dt a {
color: #000000;
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: gray;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000000;
background-color: #FFFFFF;
padding: 5px;
border: 1px solid gray; 
}


Mon code XHTML : 

[code]<html>
<head>
<title>Même pas Froid!</title>
<link rel="stylesheet" type="text/css" href"style.css"> 
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>

</head>
<body>
<div id="menu">
	
	<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('smenu2');">Menu 2</dt>
			<dd id="smenu2">
				<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('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>



</body>
</html>


Si quelqu'un pouvait m'expliquer ce qui ne va pas... c'est assez urgent, je dois avoir fini mon site pour lundi Smiley confused .

Merci d'avance! Bises!
Modifié par Igor (29 Oct 2006 - 15:14)
bonjour,
Les règles de style ne sont pas appliquées, il ne fallait pas chercher bien loin. Mais il est vrai que quand on est pressé(e), on ne voit pas le petit caractère oublié qui change tout :
<link rel="stylesheet" type="text/css" href[#red]=[/#]"style.css">

Modifié par chmel (29 Oct 2006 - 00:45)
Sujet clos
Aller à