hover ne marchant pas bien dans un li avec hover

145909
,

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.

[

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.

2 Réponse

145909
, Il a répondu à ma question !

Veuillez m'exusez l'html a été retranscrit comme sur un site le voici:

Merci.

17162
, Il a répondu à ma question !

Bonjour.
Au lieu de faire une réponse à ton sujet pour modifier une partie du contenu de ton sujet, édites directement ton sujet et mes tes parties de code (HTML/CSS) entre les balises de code, soit avec le bouton </>.
Car actuellement tes parties de code ne sont absolument pas mis en valeur, concernant la partie CSS sans indentation de celui-ci, il n'est pas évident à lire et concernant le code HTML, étant donné qu'il est directement interprété on ne peut pas le voir.