Menu

Problème menu déroulant horizontale [Résolu/Fermé]

Messages postés
57
Date d'inscription
mercredi 8 janvier 2014
Statut
Membre
Dernière intervention
22 juillet 2015
- - Dernière réponse : kush91170
Messages postés
57
Date d'inscription
mercredi 8 janvier 2014
Statut
Membre
Dernière intervention
22 juillet 2015
- 11 févr. 2014 à 11:24
Bonjour à tous,

j'ai un petit problème avec mon menu déroulant, plus particulièrement avec mon sous menu. Avant mes explications voici mon code HTML:
<div class="menu">
  <nav>
    <ul id="menu_horizontal">
       <li class="menu_2"><a href="#"><span style="font-size:1em">Accueil</span></a></li>
       <li class="menu_2"><a href="#"><span style="font-size:1em">Etaiement</span></a>
          <ul>
            <li class="sous_menu"><a href="#"><span style="font-size: 1em">exemple</span></a></li>
            <li class="sous_menu"><a href="#"><span style="font-size: 1em">c</span></a></li>
          </ul>
        </li>
        <li class="menu_2"><a href="#"><span style="font-size: 1em">Sécurité</span></a></li>
        <li class="menu_2"><a href="#"><span style="font-size: 1em">Panneaux de coffrage</span></a></li>
        <li class="menu_2"><a href="#"><span style="font-size: 1em">Matériel spécifique</span></a></li>
        <li class="menu_2"><a href="#"><span style="font-size: 1em">Contact</span></a></li>
      </ul>
  </nav>
</div>

et mon CSS:
#menu_horizontal
{
	list-style: none none;
	margin-left: 80px;
	padding: 0;
	line-height: 1;
	font-size: 1.5em;
}
#menu_horizontal a
{
	display: block;
	padding:.5em;
	color: black;
	background: white;
	text-decoration: none;
}
#menu_horizontal a:hover
{
	color: white;
	background: orange;
	text-decoration: underline;
}
.menu_2
{
	float: left;
	position: relative;
}
.sous_menu
{
	display: none;
	position: absolute;
	left: 0;
	top: 2em;
	white-space: nowrap;
	background: white;
	margin-top: -2px;
}
.menu_2:hover .sous_menu
{
	display: block;
}

Mon problème est le suivant: lorsque je survole "etaiement", j'ai normalement deux catégorie qui s'affichent cependant je peux observer qu'elles se superposent. Je pense que c'est à cause du position: absolute. Je n'est pas d'autre solution étant donné que toute ma page se décale si je mets relative. Auriez-vous une solution à ce problème?

Merci d'avance pour vos réponses

A+


Afficher la suite 

1 réponse

Meilleure réponse
Messages postés
2849
Date d'inscription
jeudi 10 mars 2005
Statut
Membre
Dernière intervention
21 mars 2019
463
1
Merci
Salut

ne mets de pas de class a tes ul et li

le probleme viens de menu_2 float: left;

fait comme expliqué dans cette page
http://css.mammouthland.net/menu-horizontal-deroulant-en-css.php

Un petit merci vaut mieux qu'une grande ignorance !
Donc si votre sujet est résolu une réponse avec merci c'est pas de refus.

Dire « Merci » 1

Quelques mots de remerciements seront grandement appréciés. Ajouter un commentaire

CCM 39184 internautes nous ont dit merci ce mois-ci

kush91170
Messages postés
57
Date d'inscription
mercredi 8 janvier 2014
Statut
Membre
Dernière intervention
22 juillet 2015
1 -
Super! Ca fonctionne. Merci pour ton aide!