Menu Css Verticale
Résolu/Fermé
lykmozee
Messages postés
71
Date d'inscription
mardi 10 avril 2007
Statut
Membre
Dernière intervention
27 février 2009
-
1 janv. 2009 à 12:26
web-actu Messages postés 99 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 21 août 2009 - 2 janv. 2009 à 12:57
web-actu Messages postés 99 Date d'inscription dimanche 16 novembre 2008 Statut Membre Dernière intervention 21 août 2009 - 2 janv. 2009 à 12:57
A voir également:
- Menu Css Verticale
- Menu déroulant excel - Guide
- Ps5 verticale - Guide
- Menu démarrer windows 11 - Guide
- Canon quick menu - Télécharger - Utilitaires
- Barre verticale mac ✓ - Forum MacOS
5 réponses
web-actu
Messages postés
99
Date d'inscription
dimanche 16 novembre 2008
Statut
Membre
Dernière intervention
21 août 2009
6
1 janv. 2009 à 12:35
1 janv. 2009 à 12:35
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é
#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é
lykmozee
Messages postés
71
Date d'inscription
mardi 10 avril 2007
Statut
Membre
Dernière intervention
27 février 2009
9
1 janv. 2009 à 17:55
1 janv. 2009 à 17:55
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
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
web-actu
Messages postés
99
Date d'inscription
dimanche 16 novembre 2008
Statut
Membre
Dernière intervention
21 août 2009
6
1 janv. 2009 à 19:41
1 janv. 2009 à 19:41
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
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
lykmozee
Messages postés
71
Date d'inscription
mardi 10 avril 2007
Statut
Membre
Dernière intervention
27 février 2009
9
1 janv. 2009 à 21:18
1 janv. 2009 à 21:18
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.
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.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
web-actu
Messages postés
99
Date d'inscription
dimanche 16 novembre 2008
Statut
Membre
Dernière intervention
21 août 2009
6
2 janv. 2009 à 12:57
2 janv. 2009 à 12:57
Derien sa ma fais plaisire de t'aider.
