Menu Css Verticale
Résolu
Bonjour Tout le monde,
Je suis entrain de réaliser un site web personnel donc j ai effectuer toute les étapes disant que le site est operationelle mais j aimerai en ajouté un menu qui contient des sous menu qui se dévoile en passant la sourie sur le menu parant et comme je suis encore debutant en css j ai du mal a pouvoir le fair seul donc si quelqu un a possede un menu du genre j espere qu il puisse m envoier le code source
J espere que j étais assez clair
Merci;
Je suis entrain de réaliser un site web personnel donc j ai effectuer toute les étapes disant que le site est operationelle mais j aimerai en ajouté un menu qui contient des sous menu qui se dévoile en passant la sourie sur le menu parant et comme je suis encore debutant en css j ai du mal a pouvoir le fair seul donc si quelqu un a possede un menu du genre j espere qu il puisse m envoier le code source
J espere que j étais assez clair
Merci;
Configuration: Windows XP Internet Explorer 6.0
5 réponses
-
CSS :
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:#00008b;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:50px;
}
xHTML:
<div id="menu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="#">Contacte</a>
<li><a href="#">Membre</a>
<ul>
<li><a href="#">Connexion</a></li>
<li><a href="#">Inscription</a></li>
</ul>
<li><a href="#">Astuces</a>
<ul>
<li><a href="#">Windows XP</a>
<li><a href="#">Windows Vista</a>
<li><a href="#">Internet Explorer</a>
</ul>
</ul>
</div>
Voila j'espere que sa t'aurés été d'utilité -
Merci POur ton aide
mais j arrive toujour pas acceder au sous menu je vois que le menu principale qui est acceuil membre....
Par exemple membre ca contient 2 sous menu en clickant ou mm en deplacant la souri sur membre rien ne se passe !!!
donc j espere s il y aune possibilité que lors du click ou bien du deplacement de la souris sur le menu membre les sous menu connexion et inscription s affiche
Merci
PS: j ai tester sur IE6 -
passe ta souris sur contacte et astuce
sinon moi pour que sa marche je te marque ce que j'ai fais :
xHTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>Yukama ~ Accueil</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design.css" />
</head>
<body>
<div id="menu">
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="#">Contacte</a>
<li><a href="#">Membre</a>
<ul>
<li><a href="#">Connexion</a></li>
<li><a href="#">Inscription</a></li>
</ul>
<li><a href="#">Astuces</a>
<ul>
<li><a href="#">Windows XP</a>
<li><a href="#">Windows Vista</a>
<li><a href="#">Internet Explorer</a>
</ul>
</ul>
</div>
</body>
</html>
Et le CSS
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:#00008b;
}
#menu li a {
display:block;
width:100px;
color:white;
text-decoration:none;
padding:5px;
}
#menu li a:hover {
color:#FFD700;
}
#menu ul li ul {
display:none;
}
#menu ul li:hover ul {
display:block;
}
#menu li:hover ul li {
float:none;
}
#menu li ul {
position:absolute;
}
#menu {
height:50px;
}
Haa oui le fichier .css doit s'appelé design
-
Merci l'Ami;
Effectivement comme je t ai dis toute a l heure ca marche pas comme je souhaité sur IE mais par contre ca marche nickel sur firefox
Encore merci pour ton code. -
Derien sa ma fais plaisire de t'aider.
