Menu deroulant

t4gad4 Messages postés 70 Statut Membre -
tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention - 4 mai 2012 à 09:26

Bonjour,

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!!! =)

Afficher la suite

1 réponse

tryan44 Messages postés 1289 Date d'inscription Statut Membre Dernière intervention 220

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".

<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>

Menu deroulant

1 réponse

Discussions similaires

Newsletters