28172 sujets

CSS et mise en forme, CSS3

Menu déroulant

bonjour, j'essaie de faire un menu deroulant mais je n'y arrive pas, pouvez vous me dire ou ca cloche svp

html : 

</head>
	<body>
		<header class="mainheader">
		<div class="bordhaut"></div>	
		<div class="menunav">
	<nav>
<ul class="mainul">
  <li ><a  href="index.html">Home</a></li>
  <li><a href="page2.html" class="photo">Photo</a></li>
   		<ul class="secondul">
 			<li class="secondli"><a href="#portrait" class="photo">Portrait</a></li>
 			<li class="secondli"><a href="#paysage" class="photo">Portrait</a></li>
 		</ul>

  <li><a href="argentique.html">argentique</a></li> 
  <li class="active"><a href="#" class="activetxt">Contact</a></li>
</ul>
	</nav>
		</div>



et le css :

.mainheader { background-color: white; }

ul.mainul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  text-align: center;

}

.mainheader li {
  display: inline-block;
margin-bottom:15px;
}

.menunav { 
 z-index: 10;
 }

.menunav ul.seconul li.secondli { display: inherit; }
.menunav ul.secondul {position: absolute; left: -999em; text-align: left; z-index: 1000;}
.menunav li.secondl:hover ul.secondul {left: auto;}


nav.menunav li {
  list-style: none;
}

.mainheader li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 50px;
  text-decoration: none;
}

.mainheader li a:hover {
  background-color: white;
  color: black;
}
.active {
  background-color: #d0d0d0; 
}
ul.mainul a.activetxt {color: black;}


et tout ca ne donne rien... merci d'avance
Modérateur
Salut,

Premièrement ton deuxième ul doit être à l'intérieur du li
<li><a href="page2.html" class="photo">Photo</a>
   		<ul class="secondul">
 			<li class="secondli"><a href="#portrait" class="photo">Portrait</a></li>
 			<li class="secondli"><a href="#paysage" class="photo">Portrait</a></li>
 		</ul>
</li>


Deuxièmement lors du hover li.secondl n'existe pas (faute de frappe)

Et troisièmement, pas besoin de corriger l'erreur d'au dessus car c'est faux... dans ton sélecteur : 
.menunav li.secondli:hover ul.secondul {left: auto;}

tu attends de survoler un élément qui est caché... c'est le hover de ton premier li qu'il faut que tu mettes (mais ton premier li n'a pas de classe)...
Modifié par _laurent (20 Aug 2019 - 14:44)
_laurent a écrit :
Salut,

Premièrement ton deuxième ul doit être à l'intérieur du li
&lt;li&gt;&lt;a href="page2.html" class="photo"&gt;Photo&lt;/a&gt;
   		&lt;ul class="secondul"&gt;
 			&lt;li class="secondli"&gt;&lt;a href="#portrait" class="photo"&gt;Portrait&lt;/a&gt;&lt;/li&gt;
 			&lt;li class="secondli"&gt;&lt;a href="#paysage" class="photo"&gt;Portrait&lt;/a&gt;&lt;/li&gt;
 		&lt;/ul&gt;
&lt;/li&gt;


Deuxièmement lors du hover li.secondl n'existe pas (faute de frappe)

Et troisièmement, pas besoin de corriger l'erreur d'au dessus car c'est faux... dans ton sélecteur : 
.menunav li.secondli:hover ul.secondul {left: auto;}

tu attends de survoler un élément qui est caché... c'est le hover de ton premier li qu'il faut que tu mettes (mais ton premier li n'a pas de classe)...


merci, alors j'ai réglé tout les problèmes sauf le fait que quand je veux aller cliquer sur le sous menu, celui-ci disparaît... je n'arrive pas a trouver le problème...

html : 
</head>
	<body>
		<header class="mainheader">
		<div class="bordhaut"></div>	
		<div class="menunav">
	<nav>
<ul class="mainul">
  <li ><a  href="index.html">Home</a></li>
  <li><a href="page2.html" class="photo">Photo</a>
   		<ul class="secondul">
 			<li class="secondli"><a href="#portrait" class="photo">Portrait</a></li>
 			<li class="secondli"><a href="#paysage" class="photo">Portrait</a></li>
 		</ul></li>

  <li><a href="argentique.html">argentique</a></li> 
  <li class="active"><a href="#" class="activetxt">Contact</a></li>
</ul>
	</nav>
		</div>



css : 
.mainheader { background-color: white; }

ul.mainul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: black;
  text-align: center;

}

.mainheader li {
  display: inline-block;
margin-bottom:0px;
}

.menunav { 
 z-index: 1000;
 }

.menunavsss li.secondli { display: inherit; }
.menunav ul.secondul {position: absolute; left: -999em; text-align: left; z-index: 1000;}
.menunav li:hover ul.secondul{left: auto; background-color: black;}


nav.menunav li {
  list-style: none;
}

.mainheader li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 50px;
  text-decoration: none;
}

.mainheader li a:hover {
  background-color: white;
  color: black;
}
.active {
  background-color: #d0d0d0; 
}
ul.mainul a.activetxt {color: black;}

Modifié par gab1 (20 Aug 2019 - 15:53)
_laurent a écrit :
Chez moi ça marche bien :

https://jsfiddle.net/af5cgnme/

Attention il ne faut pas que ton curseur survole "argentique" entre temps sinon le menu disparaît effectivement


bon j'ai réussi mais je n'arrive pas a changer la couleur du sous menu, quel est le code pour cela?
Modifié par gab1 (20 Aug 2019 - 20:26)
Sujet clos
Aller à