Bonjour,
j'ai regardé la vidéo dans les tutos pour créer un menu déroulant.
J'ai plusieurs problème, le majeur étant que le menu ne veut pas se mettre horizontalement...
Ensuite je n'ai qu'un menu de mon sommaire qui doit se dérouler, et lorsque je passe la souris sur le sommaire, il se déroule, j'aimerais que ça ne soit que quand je passe la souris sur le menu "projets".
Je n'arrive pas à centrer verticalement le mot dans mes "dt".
J'ai un site à faire avec Dreamweaver pour lundi donc toutes les aides possibles sont plus que bienvenues svp!!!!
Merci d'avance!
Mon code HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Document sans nom</title>
<link href="style1.css" rel="stylesheet" type= "text/css" media="screen" />
</head>
<body>
<div id="conteneur-menu">
<div id="menu_deroulant">
<dl>
<dt>Acceuil</dt>
<dt>Biographie</dt>
<dt>Projets</dt>
<dd>
<ul>
<li><a href="#">Boucles</a></li>
<li><a href="#">Miaos</a></li>
<li><a href="#">Cotons et caramel</a></li>
<li><a href="#">Identité</a></li>
<li><a href="#">Maroc</a></li>
</ul>
</dd>
<dt>Contact</dt>
</dl>
</div>
</div>
</body>
</html>
Code CSS:
@charset "UTF-8";
/* CSS Document */
body{
background: url(images/banner_rotator2.png);
}
conteneur-menu{
background: url(images/banner_rotator1.png);
height:40px;
}
menu_deroulant{
position:absolute;
}
dl{
height:40px;
margin:0; padding:0;
display:block;
float:left;
}
dt{
width:150px;
display:block;
height:40px;
color:#F3C
line-height:40px;
text-align:center;
border-right:dotted 1px #936;
cursor: pointer;
}
dd{
display:block;
margin:0; padding:0;
}
dd ul {
margin:0; padding:0;
text-align:center;
list-style:none;
}
dd ul li{
display:block;
margin:0; padding:0;
}
dd ul li a{
color:#936
display:block;
text-decoration:none;
width:150px;
height:30px;
line-height:30px;
border-top:dotted 1px #936;
border-bottom:dotted 1px #936;
}
dd ul li a:hover{
background: url(images/banner_rotator2.png);
color:#FFF;
}
dl dd{
display:none;
}
dl:hover dd{
display:block;
}
kataiyai