Menu déroulant vertical en CSS
hansou0208
Messages postés
2
Date d'inscription
Statut
Membre
Dernière intervention
-
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
Atropa Messages postés 1940 Date d'inscription Statut Membre Dernière intervention -
Bonjour,
J'essaye de tranformer un menu "fixe" en un menu déroulant vertical en HTML/CSS.
Le probleme est que j'ai suivi plusieurs tuto mais je n'y arrive pas.
Pouvez vous m'aider a modifier mon code CSS ?
Merci
Code HTML du menu
Code CSS du menu (encore incomplet)
J'essaye de tranformer un menu "fixe" en un menu déroulant vertical en HTML/CSS.
Le probleme est que j'ai suivi plusieurs tuto mais je n'y arrive pas.
Pouvez vous m'aider a modifier mon code CSS ?
Merci
Code HTML du menu
<div id="menu"> <ul> <li class="current_page_item"><a href="index.html">Accueil</a></li> <li><a href="presentation.html">Qui sommes-nous ? </a></li> <ul class="sous-menu"> <li> <a href="quiSommesNous.html"> Qui sommes-nous? </a></li> <li> <a href="notreConcept.html"> Notre concept </a></li> <li> <a href="nosValeurs.html"> Nos valeurs </a></li> </ul> <li><a href="polygonum.html">Le polygonum </a></li> <ul class="sous-menu"> <li> <a href="originePoly.html"> Les origines du polygonum </a></li> <li> <a href="composantsPoly.html"> Les composants du polygonm </a></li> </ul> <li><a href="https://www.moraz.fr/6-baume-reparateur" target="_blank">Commander le produit </a></li> <li><a href="contact.html">Nous contacter</a></li> <li class="last"><a href="https://www.moraz.fr/" target="_blank">Nos autres produits</a></li> </ul> <br/><br/> </div>
Code CSS du menu (encore incomplet)
#menu {
background-color : #FFFFF3;
width : 1000px;
margin : auto;
}
#menu ul {
margin: 0px 0px 0px 0px;
padding: 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
#menu li {
display: inline-block;
}
#menu a {
display: block;
padding: 11px 14px 11px 14px;
background-color : rgb(123, 143, 56);
text-decoration: none;
text-transform: uppercase;
text-align: center;
font-family: 'Oswald', arial narrow, sans-serif;
font-size: 15px;
font-weight: 200;
color: #FFFFFF;
border: none;
}
#menu .current_page_item a {
background: rgb(246, 169,36);
}
A voir également:
- Html menu déroulant vertical
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Editeur html - Télécharger - HTML
- Trait vertical clavier - Forum Windows
3 réponses
voilà le principe :
les sous menu doivent être dans les li du menu
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.sousmenu {
display: none;
}
.menu > li:hover > .sousmenu {
display: block;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<div>Nom de la rubrique 1</div>
<ul class="sousmenu">
<li>smenu 1</li>
<li>smenu 2</li>
<li>smenu 3</li>
</ul>
</li>
<li>
<div>Nom de la rubrique 2</div>
<ul class="sousmenu">
<li>smenu 1</li>
<li>smenu 2</li>
<li>smenu 3</li>
</ul>
</li>
</ul>
</body>
</html>
les sous menu doivent être dans les li du menu
pour un menu horizontal :
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
* {
padding : 0;
margin: 0;
}
.menu {
position: relative;
border: 1px solid red;
cursor: pointer;
list-style: none;
height: 30px;
width: 800px;
}
.menu > li {
float: left;
border-right: 1px solid black;
}
.menu .name {
height: 30px;
line-height: 30px;
width: 199px;
text-align: center;
font-weight: bold;
}
.menu > li:last-child {
border-right: none;
}
.menu > li:last-child .name{
width: 200px;
}
.menu .sousmenu {
display: none;
list-style: none;
position: absolute;
top: 30px;
left: -1px;
border: 1px solid green;
border-top-width: 2px;
width: 100%;
}
.menu li:hover > .sousmenu {
display: block;
}
.menu li:hover > .name {
background-color: green;
color: white;
}
</style>
</head>
<body>
<ul class="menu">
<li>
<div class="name">Nom de la rubrique 1</div>
<div class="sousmenu">
<div>rubrique 1</div>
<ul>
<li>smenu 1</li>
<li>smenu 2</li>
<li>smenu 3</li>
</ul>
</div>
</li>
<li>
<div class="name">Nom de la rubrique 2</div>
<div class="sousmenu">
<div>rubrique 2</div>
<ul>
<li>smenu 4</li>
<li>smenu 5</li>
<li>smenu 6</li>
</ul>
</div>
</li>
<li>
<div class="name">Nom de la rubrique 3</div>
<div class="sousmenu">
<div>rubrique 3</div>
<ul>
<li>smenu 7</li>
<li>smenu 8</li>
<li>smenu 9</li>
</ul>
</div>
</li>
<li>
<div class="name">Nom de la rubrique 4</div>
<div class="sousmenu">
<div>rubrique 4</div>
<ul>
<li>smenu 10</li>
<li>smenu 11</li>
<li>smenu 12</li>
</ul>
</div>
</li>
</ul>
</body>
</html>
