28172 sujets

CSS et mise en forme, CSS3

[Résolu] [Menu CSS] Menu vertical + Sous-Menu : problème d’affichage

Bonjour,
J’ai depuis quelques semaines décidé de réécrire mon menu en « full css », et donc d’avoir des sous-menus. Après quelques recherches et du tri, j’ai gardé ces deux tutos comme guides :
[*] http://www.css-faciles.com/menu-deroulant.php
[*] http://www.tutofr.com/tutoriaux/tutorial-menu-deroulant-css.php

Seulement, pour une raison que j’ignore le sous-menu n’affiche que le dernier item et pas toutes les items. Vous pourriez jeter un coup d’œil à mon code et me dire où je me suis planté ?

HTML

					<nav role="navigation" id="menu">
						<ul class="menus">
							<li id="home" class="menus_items"><a href="." title="Accueil">Accueil</a></li>
							<li id="didacticiels" class="menus_items"><a href="">Didacticiels</a>
								<ul class="submenus">
									<li id="origami" class="submenus_items"><a href="">Origami</a></li>
									<li id="linux" class="submenus_items"><a href="">Linux</a></li>
								</ul>
							</li>
							<li id="avatars" class="menus_items"><a href="?p=avt" title="Avatars">Avatars</a></li>
							<li id="galerie" class="menus_items"><a href="galerie" title="Galeries">Galeries</a></li>
							<li id="scripts" class="menus_items"><a href="">Scripts</a>
								<ul class="submenus">
									<li id="bash" class="submenus_items"><a href="">Bash</a></li>
									<li id="python" class="submenus_items"><a href="">Python</a></li>
								</ul>
							</li>
							<li id="traductions" class="menus_items"><a href="?p=trsl" title="Traductions">Traductions</a></li>
							<li id="blog" class="menus_items"><a href="blog/" title="Blog">Blog</a></li>
							<li id="mailer" class="menus_items"><a href="?p=mail" title="Me contacter">Cont@ct</a></li>
							<li id="about" class="menus_items"><a href="?p=abt">A propos</a>
								<ul class="submenus">
									<li id="site" class="submenus_items"><a href="">Site</a></li>
								</ul>
							</li>
						</ul>
					</nav>

CSS

/* ------------- MENU ------------- */
.menus_items, .submenus_items
{
	text-align : center;
	width : 110px;
	margin-left : auto;
	margin-right : auto;
}

/* ------------- MENUS ------------- */

/* Bordure blanche de 1 pixel sur les cases du menu */
.menus_items
{
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	padding-top : 2px;
	padding-bottom : 2px;
	margin-top : 5px;
	margin-bottom : 5px;
	background-color : #000;
	border-radius : 3px;
	list-style-type : none;
	position : relative;
}

/* Comportement des cases du menu quand la souris passe dessus */
.menus_items:hover
{
	background-color : #808080;
	color : #fff;
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	list-style-type : none;
}

/* Comportement des liens du menu */
#menu .menus a, #menu .menus a:link, #menu .menus a:visited
{
	color : #fff;
	text-decoration : none;
}

/* ------------- SOUS-MENUS ------------- */
/* Bordure blanche de 1 pixel sur les cases du sous-menu */
.submenus_items
{
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	padding-top : 2px;
	padding-bottom : 2px;
	margin-top : 5px;
	margin-bottom : 5px;
	background-color : #000;
	border-radius : 3px;
	list-style-type : none;
/* Par defaut, on cache les sous-menus */
	display : none;
	position : relative;
}

/* Mais si on passe sur un menu qui a un sous-menu, on affiche ce dernier */
.menus li:hover .submenus_items
{
	display : block;
	position : absolute;
	left : 110px;
	top : -6px;
}

/* Comportement des cases du sous-menu quand la souris passe dessus */
.submenus_items:hover
{
	background-color : #808080;
	color : #fff;
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	list-style-type : none;
}


Par avance, merci Smiley smile

---
Le fiddle qui va bien, au cas où ça ne vous parlerait pas :
http://jsfiddle.net/by66y/
Modifié par Captain Ishido (09 Jan 2013 - 11:50)
Bonjour,
Tu appliques pas sur le bon élément.
Le sous-menu, c'est avant tout le ul et pas les li qu'il y a à l'intérieur.
Ça fonctionne comme ça :

/* ------------- SOUS-MENUS ------------- */
/* Bordure blanche de 1 pixel sur les cases du sous-menu */
.submenus_items
{
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	padding-top : 2px;
	padding-bottom : 2px;
	margin-top : 5px;
	margin-bottom : 5px;
	background-color : #000;
	border-radius : 3px;
	list-style-type : none;

}
/* Par defaut, on cache les sous-menus */
.menus li [b].submenus[/b]
{
	display : none;
	position : relative;
}

/* Mais si on passe sur un menu qui a un sous-menu, on affiche ce dernier */
.menus li:hover[b] .submenus[/b]
{
	display : block;
	position : absolute;
	left : 110px;
	top : -6px;
	background-color : #808080;
}

/* Comportement des cases du sous-menu quand la souris passe dessus */
.submenus_items:hover
{
	background-color : #808080;
	color : #fff;
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	list-style-type : none;
}
Sylverdragon a écrit :
Bonjour,
Tu appliques pas sur le bon élément.
Le sous-menu, c'est avant tout le ul et pas les li qu'il y a à l'intérieur.
Ça fonctionne comme ça :

/* ------------- SOUS-MENUS ------------- */
/* Bordure blanche de 1 pixel sur les cases du sous-menu */
.submenus_items
{
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	padding-top : 2px;
	padding-bottom : 2px;
	margin-top : 5px;
	margin-bottom : 5px;
	background-color : #000;
	border-radius : 3px;
	list-style-type : none;

}
/* Par defaut, on cache les sous-menus */
.menus li [b].submenus[/b]
{
	display : none;
	position : relative;
}

/* Mais si on passe sur un menu qui a un sous-menu, on affiche ce dernier */
.menus li:hover[b] .submenus[/b]
{
	display : block;
	position : absolute;
	left : 110px;
	top : -6px;
	background-color : #808080;
}

/* Comportement des cases du sous-menu quand la souris passe dessus */
.submenus_items:hover
{
	background-color : #808080;
	color : #fff;
	border-style : solid;
	border-color : #fff;
	border-width : 1px;
	list-style-type : none;
}

Ça marche au poil, merci Smiley smile
Sujet clos
Aller à