Menu vertical avec sous-menu déroulant en CCS
bart83
-
Bart83 -
Bart83 -
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:
Côté CSS:
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.
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:
- Menu vertical avec sous-menu déroulant en CCS
- Menu déroulant excel - Guide
- Excel menu déroulant en cascade - Guide
- Menu déroulant google sheet - Accueil - Guide bureautique
- Canon quick menu - Télécharger - Utilitaires
- Windows 11 menu contextuel classique - Guide