Menu déroulant
Résolu
Bonjour,
J'ai actuellement un menu horizontal que voici
Et mon rêve est de le convertir en menu déroulant en passant la souris dessus, pour le css c'est ça
Pourrais-je avoir de l'aide,
Merci
--
L'informatique c'est comme les champignons, pour trouver il faut chercher.
Si je suis là, c'est que j'ai pas trouvé
J'ai actuellement un menu horizontal que voici
<B_nav>
<div class="nav clearfix[ (#TOTAL_BOUCLE|=={1}|oui)none]" id="nav">
<ul>
<BOUCLE_nav(RUBRIQUES) {racine} {par num titre, titre}{titre_mot=menucentre} {0,8}>
<li[ class="(#EXPOSE)"]><a href="#URL_RUBRIQUE">#TITRE</a></li>
</BOUCLE_nav>
</ul>
</div>
</B_nav>
Et mon rêve est de le convertir en menu déroulant en passant la souris dessus, pour le css c'est ça
.formulaire_menu_lang { position: absolute; right: 0; top: .9em; display: block; width: 30%; }
.nav { border: solid #222; border-width: 1px 0; }
.nav ul {}
.nav ul li {}
.nav ul li a { float: left; display: block; padding: .5em 1em; border-right: 1px solid #222; text-decoration: none; }
.nav ul li.on a { background: #EED; color: #222; font-weight: normal; }
.nav ul li a:focus,
.nav ul li a:hover,
.nav ul li a:active { background: #222; color: #FFF; }
Pourrais-je avoir de l'aide,
Merci
--
L'informatique c'est comme les champignons, pour trouver il faut chercher.
Si je suis là, c'est que j'ai pas trouvé
5 réponses
-
Pourrai t-on avoir un exemple en lien ?
Cherche tu as faire un menu comme cela http://www.frogweb.fr/menu-deroulant-horizontal/ ? -
Bonjour,
Pourrai t-on avoir un exemple en lien ?
Non le site est en local, j'ai légèrement avancé mais légèrement,<B_nav> <div class="nav clearfix[ (#TOTAL_BOUCLE|=={1}|oui)none]" id="nav"> <ul> <BOUCLE_nav(RUBRIQUES) {racine} {par num titre, titre}{titre_mot=menucentre} {0,8}> <li[ class="(#EXPOSE)"]><a href="#URL_RUBRIQUE">#TITRE</a> <B_sous_rubriques> <ul> <BOUCLE_sous_rubriques(RUBRIQUES) {id_parent} {par num titre, date}{par titre}> <li[ class="(#EXPOSE)"]><a href="#URL_RUBRIQUE">#SOUSTITRE</a> <BOUCLE_sousmenu(boucle_sous_rubriques)></BOUCLE_sousmenu> </li> </BOUCLE_sous_rubriques> </ul> </B_sous_rubriques> </li> </BOUCLE_nav> </ul> </div> </B_nav>
Je butte sur le css, le menu apparaît mais il ne se déroule pas
Cherche tu as faire un menu comme cela http://www.frogweb.fr/menu-deroulant-horizontal/ ?
oui à peu prés çà,
Je crois avoir déjà vu
Merci
-
Encore ce matin je l'ai entièrement passé la dessus j'ai donc posé la question sur le site du zero:
https://openclassrooms.com/forum/sujet/la-brouille
j'attends voir ce que je vais avoir comme conseil
Merci
@+ -
Bonjour,
j'ai réalisé un site il y a pas longtemp , adapte juste le code HTML
Code HTML
<div id="menu">
<ul>
<li>
<a href="accueil.html" class="bordureG">Accueil</a></li>
</ul>
<ul>
<li>
<a href="#">Recettes</a>
<ul>
<li><a href="boeuf.html">Boeuf</a></li>
<li><a href="agneau.html">Agneau</a></li>
<li><a href="fruits de mer.html">Fruits de mer</a></li>
<li><a href="volaille.html">Volaille</a></li>
<li><a href="Sucree.html">Sucrée</a></li>
</ul>
</li>
</ul>
<ul>
<li>
<a href="#">Recettes video</a>
<ul>
<li><a href="fried rice.html">Fried Rice</a></li>
<li><a href="poulet tandoori.html">Poulet Tandoori</a></li>
</ul>
</ul>
<ul>
<li>
<a href="index.html">Déconnexion</a>
<ul>
</ul>
</li>
</ul>
</div>
Code CSS
/*menu*/
#menu
{
margin-top:-4%;
width:100%;
height:60px;
background:#d17a82;
COLOR:#ffffff;
}
#menu ul
{
margin-left:175px;
padding:0;
line-height:60px;
}
#menu li
{
list-style:none;
float:left;
position:relative;
background-color:#3f0508;
}
#menu ul li a
{
color:#000;
text-decoration:none;
width:150px;
height:60px;
display:block;
text-align:center;
border-right:1px solid #ffffff;
COLOR:#ffffff;
}
.bordureG{
border-left:1px solid #ffffff;
}
#menu ul ul
{
position:absolute;
top:60px;
left:-175PX;
visibility:hidden;
}
#menu ul li{
border-bottom:1px solid #ffffff;
border-top:1px solid #ffffff;
}
#menu ul li:hover ul
{
visibility:visible;
}
#menu li:hover
{
background-color:#8f4349;
}
#menu ul li ul a:hover
{
color:#fff;
background-color:#8f4349;
}
Cordialement -
Bonjour,
Depuis, j'ai solutionné, mais je garde ta proposition sous le coude,
Merci
