Bonjour je suis en train d'apprendre le HTML / CSS et j'ai un problème :
Mon menu marche correctement mais quand je passe ma souris sur un des onglets du menu les sous-onglets ne s'affiche pas que les bordures :
Voici le code html :
Voici le code CSS :
Merci d'avance
Mon menu marche correctement mais quand je passe ma souris sur un des onglets du menu les sous-onglets ne s'affiche pas que les bordures :
Vous devez être inscrit pour voir les liens ! Inscrivez-vous ou connectez-vous ici.
Voici le code html :
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Menu</title>
<link rel="stylesheet" href="css/menu.css" />
</head>
<body>
<nav>
<ul>
<li class="menu-html"><a href="#">HTML</a>
<ul class="submenu">
<li><a href="#">Cours</a></li>
<li><a href="#">Tutoriels</a></li>
<li><a href="#">Aide en direct</a></li>
<li><a href="#">FAQ</a></li>
</ul></li>
<li class="menu-css"><a href="#">CSS</a>
<ul class="submenu">
<li><a href="#">Cours</a></li>
<li><a href="#">Tutoriels</a></li>
<li><a href="#">Aide en direct</a></li>
<li><a href="#">FAQ</a></li>
</ul></li>
<li class="menu-php"><a href="#">PHP</a>
<ul class="submenu">
<li><a href="#">Cours</a></li>
<li><a href="#">Tutoriels</a></li>
<li><a href="#">Aide en direct</a></li>
<li><a href="#">FAQ</a></li>
</ul></li>
<li class="menu-contact"><a href="#">Contact</a>
<ul class="submenu">
<li><a href="#">Olivier</a></li>
<li><a href="#">Delphine</a></li>
<li><a href="#">Matthieu</a></li>
<li><a href="#">Marion</a></li>
</ul></li>
</ul>
</nav>
</body>
</html>Voici le code CSS :
Code:
body
{
font-family: "Source code pro", serif, Arial;
margin: 0px;
padding: 0px;
}
nav
{
width: 100%;
background-color: #424558;
}
nav ul
{
margin: 0px;
padding: 0px;
}
nav ul li
{
float: left;
position: relative;
}
nav ul li a
{
padding: 20px 30px;
color: #FFF;
}
nav ul::after
{
content: "";
display: block;
clear: both;
}
nav li
{
list-style-type: none;
}
.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: 1000;
}
.submenu li
{
border-bottom: 1px solid #CCC;
}
.submenu li a
{
padding: 15px 30px;
font-size: 13px
color: #222538;
width: 270px;
}Merci d'avance
