Probleme menu déroulant (creation de sous sous rubrique) HTML CSS

Par GlobeVer9, il y a 9 ans

Les bases HTML/CSS

Bonjour,

Je rencontre actuellement un probleme avec mon menu déroulant, j'arrive a le faire dérouler, le probleme est que je n'arrive pas a créer des sous-sous rubriques est-ce-que quelqu'un a une solution?

Voici mon code HTML:

<html> <head> <title>Page de menu</title> <link rel="stylesheet" href="Style.css"> <meta charset="utf-8"> </head> <body> <nav> <ul> <li class="menu-1"><a href="index.php">Acceuil</a></li> <li class="menu-2"><a href="NosProduits.php">Nos Produits</a> <ul class="submenu"> <li><a href="###">######</a></li> <li class="menu-5">#########<a href="#####"></a> <ul class="submenu"> <li><a href="#######">#######</a></li> <li><a href="#######">#######</a></li> <li><a href="#######">#######</a></li> </ul> </li> </ul> <li class="menu-3"><a href="#####">A Propos</a> <ul class="submenu"> <li><a href="QuiSommeNous">Qui sommes nous?</a></li> <li><a href="OuSommeNous.php">Où sommes nous</a></li> <li><a href="NousContacter.php">Nous contacter</a></li> </ul> </li> <li class="menu-5"><a href="#####">Mon Panier</a></li> <li class="menu-5"><a href="#####">Mon compte</a> <ul class="submenu"> <?php if(isset($_SESSION['Auth']) && $_SESSION['Auth']<>NULL){ echo '<li><a href="logout.php">Se déconnecter</a></li>'; }else{ if(!isset($_SESSION['Auth'])){ echo '<li><a href="SeConnecter.php">Se connecter</a></li> <li><a href="Formulaire.php">Creer un compte</a></li>'; } } ?> </ul> </li> </ul> </nav> </body> </html>

Et mon code CSS :

body{ font-family:'Source code pro', Calibri, serif; font-size: 15px; margin: 0px; padding: 0px; } nav{ width: 100%; height: 60px; background-color: #424558; } nav > ul{ margin: 0px; padding: 0px; } nav > ul::after{ content:""; diplay:block; clear:both; } nav > ul > li{ float: left; position: relative; } nav > ul > li > a{ padding: 20px 30px; color:whitesmoke; } nav li{ list-style-type: none; background-color: #424558; } .submenu{ display:none; } nav a{ display:inline-block; text-decoration: none; } nav li:hover .submenu{ display: inline-block; position: absolute; top:100%; left: 0px; padding: 0px; z-index: 100000; } .submenu li{ border-bottom:1px solid #CCC; } .submenu li a{ padding: 15px 30px; font-size:13px; color: whitesmoke; width: 270px; } .menu-1:hover{ border-top:5px solid #e44d26; } .menu-2:hover{ border-top : 5px solid #0070bb; } .menu-3:hover{ border-top: 5px solid #f1dc4f; } .menu-4:hover{ border-top : 5px solid #BBB; } nav > ul > li:hover a{ padding: 15px 30px 20px 30px; } .menu-5{ float: right; } .menu-5:hover{ border-top : 5px solid #BBB; } .centrage { margin-left: 20%; }

2 réponses

Benjamin Derepas, il y a 9 ans

Voici un petit codepen pour t'inspirer .
L'idée ici est simple, ajoute une classe à chaque niveau (ul) et une class pour chaque trigger .
Cacher les submenu , et les affichers lorsque le trigger est survolé ;)

Tu gagnera beaucoup de temps à travailler avec flexbox sur ce genre ce module.

Que tu travail avec un submenu ou 10, le principe reste le même, après c'est la mise en page qui va différer :)

Edit: tu peux aussi te tourner sur un plugin mais à mon avis il est inutile de surcharger ta page de js alors que tu peux t'en passer :)

GlobeVer9, il y a 9 ans

Merci de ta réponse je vais regarder ce que tu m'a envoyé :)