Bonjour,
Voila je rencontre un petit problème avec mon code.
Je suis entrain de faire un site où j'ai besoin de faire un menu non-déroulant fait grâce à une liste non ordonées dans lequel j'ai inséré des liens et j'aimerais que le a soit dynamique grâce à des hover. Pour cela j'ai fait en sorte que quand nous passions notre curseur sur le menu li la couleur change mais le problème est qu'il y a une séparation entre le li et le a. De plus j'aimerais que mon lien prenne tout le li sans géner la forme du li.
Voici l'html.
[ <ul id="menu">end
<li a href="#"><a href="site.html">Accueil</a></li>
<li a href="#"><a href="avant.html">Avant de partir</a></li>
<li a href="#"><a href="pendant.html">Pendant mon voyage</a></li>
<li a href="#"><a href="apres.html">Après mon voyage</a></li>
<li a href="#"><a href="contact.html">Me contacter</a></li>
</ul>
Voici le css
menu li{
display: inline-block;
border-radius: 8px 8px 5px 5px;
cursor: pointer;
z-index: 10;
position: relative;
left: 65%
}
menu, #menu ul{
text-align: center;
list-style: none;
font-weight: bold;
display: inline-block;
position: absolute;
}
menu li:first-child, #menu li:first-child li{
background-color: #0404B4;
color: #DF7401;
height:25px;
width:155px;
}
menu li:nth-child(2), #menu li:nth-child(2) li{
background-color: #0404B4;
color: #DF7401;
height:25px;
width:155px;
}
menu li:nth-child(3), #menu li:nth-child(3) li{
background-color: #0404B4;
color: #DF7401;
height:25px;
width:155px;
}
menu li:nth-child(4), #menu li:nth-child(4) li{
background-color: #0404B4;
color: #DF7401;
height:25px;
width:155px;
}
menu li:last-child, #menu-batterie li:last-child li{
background-color: #0404B4;
color: #DF7401;
height:25px;
width:155px;
}
menu li:first-child:hover{
background-color: #013ADF;
}
menu a{
background-color: #0404B4;
height:25px;
z-index: 1;
width:165px;
text-decoration:none;
position: relative;
color: #DF7401;
padding: 0.01em 0.5em 0.2em 0.2em;
}
Merci de m'avoir lu et de m'aider si vous le souhaiter.