Partage

Menu déroulant décaler (css)

13 juin 2018 à 11:32:40

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>




Vous êtes demandeur d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur web junior

Je postule
Formation
en ligne
Financée
à 100%
13 juin 2018 à 11:51:04

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


13 juin 2018 à 12:05:37

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/ 

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
13 juin 2018 à 12:13:23

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

13 juin 2018 à 14:20:15

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

13 juin 2018 à 15:16:27

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)
13 juin 2018 à 15:51:56

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !
13 juin 2018 à 15:54:47

rhooManu a écrit:

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


Putin ouai je suis débile j'utilise tout le temps ca en plus ..
13 juin 2018 à 16:01:07

ok merci ! ^^

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

Menu déroulant décaler (css)

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown