Menu vertical - Gauche

Menus à integrer dans un bloc de gauche

Dans cette exemple la taille a été fixée pour un bloc ayant une largeur de 180px

Ce menu va afficher 3 rubriques, contenant des sous-rubriques.
Une des sous-rubrique contient aussi une sous-rubrique (Voir LIEN 1 -> 5. sous-liens 1 >)


Démo


Code Html




Code CSS (A ajouter de le fichier css de votre thème)

.menu {
	font-family: arial, sans-serif; 
	position:absolute; 
	margin:0 0 0 0px; 
	font-size:11px;z-index:20;
}
.menu ul li a, .menu ul li a:visited {
	display:block; 
	text-decoration:none; 
	color:#000; width:176px; 
	height:20px; 
	text-align:center; 
	border:1px solid #fff; 
	border-width:1px 1px 0 0; 
	background:#c9c9a7; 
	line-height:19px; 
	font-size:11px;margin:0;
}
.menu ul {
	padding:0; 
	margin:0;
	list-style-type: none;
	width:176px; 
}
.menu ul li {
	float:left; 
	margin-right:172px; 
	position:relative;
}
.menu ul li ul {
	display: none;
}

/* spécifique à IE */
.menu ul li:hover a {
	color:#fff; 
	background:#b3ab79;
}
.menu ul li:hover ul {
	display:block;
	position:absolute; 
	top:0; 
	left:177px; 
	width:176px;
}
.menu ul li:hover ul li a.hide {
	background:#dfc184; 
	color:#000;
	z-index:40;
}
.menu ul li:hover ul li ul {
	display: none;
}
.menu ul li:hover ul li a {
	display:block; 
	background:#b3ab79; 
	color:#000;
	width:176px;
}
.menu ul li:hover ul li a:hover {
	background:#dfc184; 
	color:#000;
}
.menu ul li:hover ul li:hover ul {
	display:block; 
	position:absolute; 
	left:177px; 
	top:0; 
	color:#000;
}
.menu ul li:hover ul li:hover ul li a {
	display:block; 
	width:176px; 
	background:#dfc184; 
	color:#000;
	margin: 0;
}
.menu ul li:hover ul li:hover ul li a:hover {
	background:#bd8d5e; 
	color:#fff;
	margin:0;
}
.end_padding {
	padding:35px
}

Pour toutes questions: Forum

territoire
27   

territoire
  Posté : 13-03-2013 13:55

Elle est où la classe "hide"?

  Profil  www
Les Commentaires sont la propriété de leurs auteurs. Nous ne sommes pas responsables de leur contenu.






Cet article provient de NPDS Thèmes

L'URL pour cet article est : http://styles.npds.org/sections.php?op=viewarticle&artid=24