Le code HTML généré affiche bien les sous-menu, mais j'ignore si j'ai mal placé le <a href> ou le CSS:
Voilà ce que ça donne en gros:
https://imgur.com/8L1X2GV
Code : Tout sélectionner
<?php
$menus = getMenu(0);
echo '<ul>';
foreach ($menus as $menu) {
echo "<li class='menu'><a href= 'affichage.php?id={$menu['id']}'>{$menu['nom']}</a>";
$sous_menus = getMenu($menu['id']);
if ($sous_menus !== false) {
echo '<ul>';
foreach ($sous_menus as $sous_menu) {
echo "<li class='submenu'><a href= 'affichage.php?id={$menu['id']}'>{$sous_menu['nom']} </a></li>";
}
echo '</ul>';
}
echo '</li>';
}
echo '</ul>';
?>nav > ul > li:hover > a {
padding: 15px 30px 20px 30px;
}
nav li{
list-style-type: none;
}
.submenu{
display: none;
background-color: silver;
}
nav input[type=checkbox]{
display:none;
}
nav label{
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: 1000;
}
.submenu li {
border-bottom: 1px solid white;
}
.submenu li a{
padding: 15px 30px;
font-size: 13px bold;
color: white;
width: 270px;
}
.submenu li a:hover{
background-color: orange;
}
.menu:hover{
border-top: 5px solid yellow;
background-color: silver;
}
@media screen and (max-width:780px){
.menu-mobile{
display:block;
color:#fff;
background-color:orange;
text-align:center;
padding: 12px 0px;
}
nav ul{
display:none;
}
nav ul li, nav ul li a{
width: 100%;
text-align:center;
}
nav ul li a, nav ul li:hover a{
padding: 10px 0px;
}
nav li:hover .submenu{
display: block;
position: static;
}
}
