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
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 :)