Problême de menu déroulant

Sujet résolu

26 mars 2006 à 11:26:45

Bonjour tout le monde !
Voila en fait j'aimerai faire un menu déroulant en CSS mais quelque chose ne va pas ; par exemple, quand je vais sur accueil et dans la liste forum et livre d'or apparaissent, seulement quand je veux cliquer dessus le menu déroulé part ...
Je vous donne les 2 codes source :

Index.html

Design2.css

body
{
color: #FF6700;
}

#menu_naviguation
{
width: 900px;
text-align: center;
height: 20px;
border: 1px dashed #FF6700;
}

.bouton_gauche
{
width: 120px;
height: 20px;
float: left;
border-right: 1px dashed #FF6700;
}

.bouton_gauche ul
{
position:absolute;
top:15px;
left:-32px;
width: 120px;
border: none;
display: none;
}

.bouton_gauche:hover ul
{
width: 120px;
border: none;
display: block;
}

.bouton_gauche:visited ul
{
width: 120px;
border: none;
display: block;
}

.bouton_gauche li
{
list-style-type: none;
width: 120px;
border: 1px dashed #FF6700;
border-top: none;
}

.bouton_gauche:hover
{
width: 120px;
height: 20px;
float: left;
border-right: 1px dashed #FF6700;
background-color: #d9d9d9;
}

.bouton_droite
{
width: 120px;
height: 20px;
float: right;
border-left: 1px dashed #FF6700;
}

.bouton_droite:hover
{
width: 120px;
height: 20px;
float: right;
border-left: 1px dashed #FF6700;
background-color: #d9d9d9;
}

strucky

26 mars 2006 à 12:53:48

Salut,

Un menu déroulant s'effectue avec un <ul> et non avec des <div>.

Exemple fonctionnel :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>
° InformaTrucs °
</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design classique" href="design2.css" />
<style type="text/css">
*{margin: 0; padding: 0}
ul{list-style-type: none}
a{text-decoration: none}
body{color: #FF6700;}
#menu_naviguation{width: 900px; text-align: center; height: 20px; border: 1px dashed #FF6700;}
#menu_naviguation li{width: 120px; height: 20px; float: left; border-right: 1px dashed #FF6700;}
#menu_naviguation li:hover{width: 120px; height: 20px; background-color: #ffff99}
#menu_naviguation li ul{position:absolute; top: 21px; left: 0; width: 120px; display: none;}
#menu_naviguation li:hover ul{width: 120px; display: block; border: 1px dashed #FF6700; border-top: 0;}
#menu_naviguation li ul li{width: 120px; height: 20px; float: left; border-top: 1px dashed #FF6700;}
#menu_naviguation li ul li a{display: block; height: 20px}
#menu_naviguation li ul li a:hover{background: #ffffcc}
#menu_naviguation .bouton_droite{float: right;}
</style>
</head>
<body>
<ul id="menu_naviguation">
<li>Accueil
<ul>
<li><a href="#">Forum</a></li>
<li><a href="#">Livre d'or</a></li>
</ul>
</li>
<li>
Livre d'or
</li>
<li>
Forum
</li>
<li>
Pass perdu
</li>
<li class="bouton_droite">
Inscription
</li>
<li class="bouton_droite">
Connexion
</li>
</ul>
</body>
</html>

ZéroCool

26 mars 2006 à 13:41:42

Oh merci !

Edit : il y avait juste une erreur dans ton CSS: tu as mis position absolute puis tu a mis left:0 ==>il ne fallait rien mettre car sinon tout allait en dessous de Accueil