Menu deroulant
t4gad4
Messages postés
70
Statut
Membre
-
tryan44 Messages postés 1381 Statut Membre -
tryan44 Messages postés 1381 Statut Membre -
Bonjour,
voila je vous donne le code de mon menu:
et je vous donne le code css qui va avec:
et voici la question :) Pourquoi est ce que le lien vers presentation ne veut pas derouler les gammes ca fais une heure que je cherche et ca commence a m'epuiser ce truc si quelqu'un s'y connais mieux que moi ca serai super cool merci d'avance!!! =)
voila je vous donne le code de mon menu:
<div id="div_menu-nav"> <ul> <li><a href="Accueil.html" title="" class="current" ><span>Accueil</span></a></li> <li><a href="Nous.html" title=""><span>Nous</span></a></li> <li><a href="Produits.html" title=""><span>Produits</span></a></li> <ul> <li><a href="Clasic.html"><span>Gamme Clasic</span></a></li> <li><a href="Contempo.html"><span>Gamme Contempo</span></a></li> <li><a href="Eco.html"><span>Gamme Eco</span></a></li> <li><a href="Clasic.html"><span>Gamme First</span></a></li> </ul> <li><a href="Contact.html" title=""><span>Contact</span></a></li> </ul> </div>
et je vous donne le code css qui va avec:
#div_menu-nav{position:relative;height:43px;font-size:14px;text-transform:uppercase;background:#fff url("menu1.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;}
#div_menu-nav ul{margin:0;padding:0;list-style-type:none;width:auto;float:left;}
#div_menu-nav ul li{display:block;float:left;margin:0 2px;}
#div_menu-nav ul li a{display:block;float:left;color:#000000;text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;}
#div_menu-nav ul li a span{display:block;float:left;padding:0 25px 0 0;height:31px;width:auto;}
#div_menu-nav ul li a:hover{color:#fff;}
#div_menu-nav ul li a:hover span{display:block;cursor:pointer;}
#div_menu-nav ul li a.current,
#div_menu-nav ul li a.current:hover{color:#008000;background:transparent url("menu2.gif") no-repeat top left;}
#div_menu-nav ul li a.current span{background:transparent url("menu3.gif") no-repeat top right;height:43px;}
#div_menu-nav ul ul li{display:none;}
#div_menu-nav ul li a span.hover ul {display: block;}
#div_menu-nav ul li a span.hover ul li {float: inherit;}
et voici la question :) Pourquoi est ce que le lien vers presentation ne veut pas derouler les gammes ca fais une heure que je cherche et ca commence a m'epuiser ce truc si quelqu'un s'y connais mieux que moi ca serai super cool merci d'avance!!! =)
A voir également:
- Menu deroulant
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Supprimer menu déroulant excel ✓ - Forum Word
- Canon quick menu - Télécharger - Utilitaires
1 réponse
Bonjour,
A vue de nez et sans me pencher sur le code CSS, je dirais qu'il y a des soucis d'imbrication des balises "li" et "ul".
Même avec cette "correction", le CSS bug ! Ci dessous, un code qui fonctionne, à vous de l'adaptez.
A vue de nez et sans me pencher sur le code CSS, je dirais qu'il y a des soucis d'imbrication des balises "li" et "ul".
<ul> <li><a href="Accueil.html" title="" class="current" ><span>Accueil</span></a></li> <li><a href="Nous.html" title=""><span>Nous</span></a></li> <li><a href="Produits.html" title=""><span>Produits</span></a> <ul> <li><a href="Clasic.html"><span>Gamme Clasic</span></a></li> <li><a href="Contempo.html"><span>Gamme Contempo</span></a></li> <li><a href="Eco.html"><span>Gamme Eco</span></a></li> <li><a href="Clasic.html"><span>Gamme First</span></a></li> </ul> </li> <li><a href="Contact.html" title=""><span>Contact</span></a></li> </ul>
Même avec cette "correction", le CSS bug ! Ci dessous, un code qui fonctionne, à vous de l'adaptez.
<style type="text/CSS">
#menu {
height:50px;
}
#menu ul {
margin:0;
padding:0;
list-style-type:none;
text-align:center;
}
#menu li {
float:left;
margin:auto;
padding:0;
background-color:black;
}
#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;
}
</style>
<!--[if !IE]> <-->
<style type="text/CSS">
#menu li ul {
position:absolute;
}
</style>
<div id="menu"> <ul> <li><a href="Accueil.html" title="" class="current" ><span>Accueil</span></a></li> <li><a href="Nous.html" title=""><span>Nous</span></a></li> <li><a href="Produits.html" title=""><span>Produits</span></a> <ul> <li><a href="Clasic.html"><span>Gamme Clasic</span></a></li> <li><a href="Contempo.html"><span>Gamme Contempo</span></a></li> <li><a href="Eco.html"><span>Gamme Eco</span></a></li> <li><a href="Clasic.html"><span>Gamme First</span></a></li> </ul> </li> <li><a href="Contact.html" title=""><span>Contact</span></a></li> </ul> </div>
