28172 sujets

CSS et mise en forme, CSS3

Problème avec un menu déroulant

Coucou !

Je suis nouvelle sur le forum, mais plein de bonne volonté. J'ai envie de m'améliorer et de faire des sites web de plus en plus beau. Or la, j'ai un problème, je cherche à configurer mon site web avec un menu déroulant... J'y ai deja passé au moins 5h et je sèche. J'ai essayer des dizaines de trucs et regardé des 20aines de tuto... Mais rien n'y fait ! Mon menu déroulant ne s'affiche pas ! Alors si quelqu'un pouvait m'aider ça serait super sympa !

Voici le code html :
 <div class="menu_nav">
        <ul>
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="support.html">Présentation</a></li>
          <ul class="menuderoulant">
          <li><a href="#">Menu 1</a></li>
          </ul>
          <li><a href="about.html">Nos compétences</a></li>
          <li><a href="blog.html">Références</a></li>
          <li><a href="blog.html">Actualités</a></li>
          <li><a href="contact.html">Nous contacter</a></li>
        </ul>


et le css qui va avec :

.menu_nav {
	margin:0;
	padding:10px 0;
	float:left;
	border-top:1px solid #e1e0e0;
	width:970px;
	height:auto;
}
.menu_nav ul {
	list-style:none;
	width:700px;
	float:left;
}
.menu_nav ul li {
	margin:0;
	padding:0 2px 0 0;
	float:left;
	background:no-repeat right center;
}
.menu_nav ul li a {
	border-right:1px solid #e1e0e0;
	display:block;
	margin:0;
	padding:2px 20px;
	color:#848383;
	text-decoration:none;
	font:normal 13px Arial, Helvetica, sans-serif;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
	color:#424242;
}
.menu_nav ul li.last a {
	border:0;
}
.menu_nav .menuderoulant {
	display:none;	
	margin:0;
	padding:10px 0;
	border-top:1px solid #e1e0e0;
	height:auto;
}

.menu_nav .menuderoulant ul {	
	list-styke:none;
}

.menu_nav .menuderoulant ul li {
	margin:0;
	padding:0 2px 0 0;
	float:left;
	background:no-repeat right center;
}
.menu_nav .menuderoulant ul li a {
	border-right:1px solid #e1e0e0;
	display:block;
	margin:0;
	padding:2px 20px;
	color:#848383;
	text-decoration:none;
	font:normal 13px Arial, Helvetica, sans-serif;
}
.menu_nav ul li.active a, .menu_nav ul li a:hover {
	color:#424242;
}
.menu_nav ul li.last a {
	border:0;
}

.menu_nav li:hover > .menuderoulant { display: block; }

Modifié par fvsch (02 Dec 2011 - 17:34)
Salut,

déjà premier problème :

ton ul "menuderoulant" se trouve directement enfant de l'ul principal, il faut le placer dans un li
(surtout que ton menu déroulant s'affiche au survol de son li parent dans ta css : ".menu_nav li:hover > .menuderoulant" ).

Par exemple :

<li>
     <a href="support.html">Présentation</a>
     <ul class="menuderoulant">
          <li><a href="#">Menu 1</a></li>
     </ul>
</li>


Ensuite tu n'auras plus qu'à mettre ton menu déroulant en position: absolute; (pour ne pas que le display block détruise tout ton menu à son affichage.


Edit : ha et au fait :
.menu_nav .menuderoulant ul {	
	list-styke:none;
}


Petit problème Smiley langue
Modifié par p0ulpe (02 Dec 2011 - 00:21)
Merci beaucoup P0ulpe ! Je me suis prise la tête pendant 5heure sur un truc que tu as résolu en 10 minutes, tu es un génie ! Smiley biggrin

Il me reste encore quelques trucs à paufiner, mais ca marche ! Encore une fois merci !
Sujet clos
Aller à