Menu vertical avec sous-menu déroulant en CCS

Fermé
bart83 - 20 janv. 2011 à 16:18
 Bart83 - 20 janv. 2011 à 21:20
Bonjour,
je souhaiterais modifier mon menu vertical fait en css uniquement pour lui rajouter un sous menu dans une rubrique.
J'ai déjà le menu simple qui est codé, par contre le sous-menu est codé partie html, car simple, mais c'est dans le css que je bloque pour que mon sous menu s'affiche au survol de la souris.
Voici mes codes:

Côté html:
<div id="templatemo_menu_wrapper">
        	<div id="templatemo_menu">
                <ul>
                      <li><a href="#" class="current"> titre1</a><ul >
   <li><a href="#">sous menu1</a></li>
   <li><a href="#">sous menu 2</a></li>
   <li><a href="#">sous menu3</a></li>
  </ul>
</li>
                      <li><a href="#">titre2</a></li>
                      <li><a href="#">titre3</a></li>
                      <li><a href="#">titre4</a></li>
                      <li><a href="#">titre5</a></li>
                      <li><a href="#">titre6</a></li>
                      <li class="last"><a href="#">titre7</a></li>
                </ul>    	
            </div>


Côté CSS:

#templatemo_menu_wrapper {
	float: left;
	width: 278px;
	height: 320px;
	background: #0b3502;
	padding: 1px;
	overflow: hidden;
}

#templatemo_menu {
	padding: 14px 28px;
	border: 1px solid #313131;
	background: #0b3502;
	overflow: hidden;	
}

#templatemo_menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#templatemo_menu ul li {
	width: 200px;
	height: 38px;
	padding: 0 0 0 20px;
	margin: 0px;	
	background: #161616;	
	margin-bottom: 4px;
}

#templatemo_menu ul li:hover {
	background: #0d0d0d;
}

#templatemo_menu ul li a {
	display: block;
	width: 170px;
	height: 28px;
	padding: 10px 0 0 30px;
	color: #9fa2a4;
	font-size: 16px;
	text-decoration: none;
	font-weight: normal;
	background: url(images/templatemo_menu_list_icon.jpg) left center no-repeat;
	outline: none;
}

#templatemo_menu li a:hover, #templatemo_menu li .current {
	color: #ffffff;
	
}

#templatemo_menu .last {
	margin-bottom: 0px;
}


Voilà, donc avec ce code j'ai bien mon menu au design souhaité avec mon sous menu, mais ce sous-menu est pour l'instant supperposé au menu existant, je voudrais à ce qu'il soit caché (le sous menu) puis qu'il apparaisse au survol de la souris...
Si vous savez où là je pêche merci de vos lumières.
Cordialement.
A voir également:

2 réponses

LaurentJ1 Messages postés 43 Date d'inscription vendredi 7 janvier 2011 Statut Membre Dernière intervention 30 janvier 2011 8
20 janv. 2011 à 21:08
Salut,
Regarde par ici. Peut-être que tu trouveras ton bonheur.
http://www.htmldrive.net/categorys/tag/vertical%20navigation%20menu/1

ciaoo
0
Salut,
merci à toi, je viens de regarder les 2 premiers, c pas ce que je cherche mais c'est très beau! Donc je garde sous le coude pour d'autre projets.
Merci à toi.
Bonne soirée.
0