Bonjour ! 

Je suis entrain de créer mon site et j'ai rencontrer une erreur embêtante. J'ai créer une barre de menu sur lequel se situe plusieurs boutons, et sur un de ces bouton un menu et censé ce dérouler quand on passe dessus. Mais le menu et décaler par rapport au bouton, et je connais la raisons (J'ai centrer le menu principale avec des pourcentages. Mais le menu déroulant et aussi décaler :/ au lieu de rester bien en dessous du bouton) Je trouve pas comment regeler le problème :'(. J'ai besoin d'aide svp !

/*Menu*/
#menu ul 
	{
	line-height:50px;
	}
	
#menu li 
	{
	left:3.5%;  /*Le FAMEUX décalage*/
	right:97.5%;
	margin:0;
	list-style:none;
	float:left;
	position:relative;
	background-color:black;
	}
		
#menu ul li a
	{
	width:150px;
	height:48px;
	color:white;
	text-decoration:none;
	display:block;	
	border:1px solid black;
	}
	
#menu ul ul
	{
	width:150px;
	height:50px;
	visibility:hidden;
	position:absolute;
	top:50px;
	}
	
#menu ul li:hover ul
	{
	visibility:visible;	
	}
	
#menu li:hover
	{
	background-color:gray;
	}
	
#menu ul li a:hover
	{
	color:white;
	background-color:gray;
	}

.menu	
	{
    margin-left:auto;
	margin-right:auto;
	margin-top:auto;
	background:black;
	margin-top:8px;
	height:50px;
	width: 1321px;
	text-align:center;
	}
	
.menu a 
	{	
	color:white;
	text-decoration:none;
	float:left;	
	
	}	
.menu a:hover 
	{
	background:gray;
	}

<div class="menu" id="menu">

	<ul><li><a href="index.php">Acceuil</a></li></ul> <ul><li><a href="histoire.php">Histoire</a></li></ul> <ul><li><a href="#">Organigrame </a><ul> <li><a href="#">CA </a></li>  </ul></li></ul>    <ul><li><a href="#">Photo DPS</a></li></ul>   <ul><li><a href="#">Demande DPS</a><ul> <li><a href="#">Formulaire</a></li>   </ul></li></ul>   <ul><li><a href="#">Circuit</a></li></ul>    <ul><li><a href="http://www.circuit-nogaro.com/en/">Nogaro</a></li></ul> <ul><li><a href="#">Acces membre</a></li></ul></font>

</div>

Salut,

Rajoute la ligne :

#menu ul li ul li {
  left:0;
}

Afin de coller à gauche la partie qui apparaît et rajoute aussi le padding 0 : 

#menu ul ul
    {
    width:150px;
    height:50px;
    visibility:hidden;
    position:absolute;
    top:50px;
    padding:0;    /*Cette dernière ligne*/
    }

Tiens-nous au courant !

Salut,

Pourquoi est-ce que tu as autant de <ul>, juste pour contenir un élément <li> ? Quelle est cette balise </font> que je vois à la fin, et qui ne devrait pas y être ?

Pourquoi float, pourquoi tous ces pourcentages, ces tailles fixes ? Tu te compliques la vie avec tout ça.

https://jsfiddle.net/oLzvyntk/18/ 

C'est ce que je me disais une fois avoir revu l'HTML en détail, il y a beaucoup trop de balises inutiles.

Sur ce lien, ton menu que j'ai refait de manière un peu plus propre : https://codepen.io/anon/pen/dKRNmX

Ok merci beaucoup Offkors j'ai réussi ! Désolé de t’embêter mais j'ai encore une question. Comment faire pour que les bouton soir de la même taille ?

-
Edité par Loken32 13 juin 2018 à 15:01:30

c'est barbare mais si tu rajoute un width :100 px a tes <li> dans le css ça le fait (en tout cas sur codepen)

avec flexbox : https://jsfiddle.net/oLzvyntk/18/

rhooManu a écrit:

avec flexbox : https://jsfiddle.net/oLzvyntk/18/

Putin ouai je suis débile j'utilise tout le temps ca en plus ..

ok merci !

-
Edité par Loken32 13 juin 2018 à 16:02:12