mettre une sous liste en verticale

9 décembre 2017 à 11:52:02

Bonjour, j'ai un problème avec mon site

j'ai créé une liste horizontale mais j'aimerai que la sous-liste (subnav) soit en verticale...j'y arrive pas du tout ! j'ai même pensé à extraire la sous liste et la mettre en dehors puis la placer en dessous du lien (Loisirs, sous lequel elle doit apparaître) et avec un hover faire en sorte qu'elle apparaisse quand on passe la souris sur le lien mais ça fonctionne pas non plus :( si quelqu'un peut m'aider svp !

Voici mon html:

<body>
	<div id="navigation">
		<head>
			<ul id="menu_H">
				<ul id="liste">
					<li><a class="current" href="accueil.html">Accueil</a></li>
					<li><a href="formation.html">Formation</a></li>
					<li><a href="competences">Compétences</a></li>
					<li class="active"><a href="loisirs">Loisirs</a></li>
					<li><a href="index">Index</a></li>				
				</ul>
				<img id="logo" src="image/ARC EP logo.png"/>
				<ul id="subnav">
					<li><a href="jeux-vidéo.html">Jeux-Vidéo</a></li>
					<li><a href="cinéma.html">Cinéma</a></li>
					<li><a href="animaux.html">Animaux</a></li>		
				</ul>
			</ul>
			
		</head>
	</div>

et mon CSS :

#subnav li {
	text-decoration: none;
	list-style-type: none;
	position:relative;
	right:-9.5em;
	top:-1em;
	opacity: 0;
}

#liste li :hover #subnav li {
	opacity:1;
}

merci !

EmmanuelBeziat

9 décembre 2017 à 11:58:45

Salut,

Attends, d'où sort cette balise <head> ? Elle n'a rien à faire là. Et pourquoi un <ul> dans un <ul> ? Ce n'est pas possible. Je te suggère de relire un peu le cours html/css du site, parce que là il te manque quelques bases.

Voilà un exemple de liste imbriqué, déjà :

<ul>
	<li>Liste</li>
	<li>Liste</li>
	<li>Liste</li>
	<li>
		<ul>
			<li>Liste</li>
			<li>Liste</li>
			<li>Liste</li>
			<li>Liste</li>
		</ul>
	</li>
</ul>

Si c'est fait autrement que comme ça, ça ne peut pas marcher.

Ensuite, pour comprendre ce que tu essaies de faire : http://www.frogweb.fr/menu-deroulant-horizontal/

-
Edité par EmmanuelBeziat 9 décembre 2017 à 11:58:58

Il n'y a pas de mauvais navigateur, il n'y a que du mauvais code !

GuillaumeBo1

9 décembre 2017 à 12:05:28

Merci de ne pas confondre les balise <head> et <header> qui NE sont PAS les même. <head> sert à transmettre des paramètres au navigateur quand à <header> sert à indiqué que ce qu'elle contient s'affiche en haut de page (même si tu peux la placer où tu veux).

Pour ton<ul id="menu_H"> Je pense que la balise adéquat est<nav id="menu_H">.

-
Edité par GuillaumeBo1 9 décembre 2017 à 12:12:06

Un homme azerty en vaut deux.