Menu déroulant Liste CSS

Question

Je crée un menu déroulant simple en utilisant css.

<ul> 
    <li id="base"><a href="projects.php" class="button">Projects</a> 
     <ul> 
      <li>Project 1</li> 
      <li>Project 2</li> 
     </ul> 
    </li> 
</ul> 

Ce que je ne peux pas comprendre, comment puis-je obtenir le texte d'ancre « Projets » pour le changer correctement est arrière-plan pour indiquer que vous naviguez dans cette liste.

Si je demande un effet de fond à base de li #,

li#base:hover { 
    background: #4b4b4b; 
    border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -moz-border-radius: 4px; 
    -khtml-border-radius: 4px; 
} 

je reçois ce contexte indésirable si je suis planant au-dessus "Projet 1" ou "Projet 2":
undesired

Le image ci-dessous est ce que je veux regarder, mais c'est avec le pseudo-curseur hover appliqué à l'ancrage au lieu de li # base (qui ne restera en surbrillance quand je suis sur le lien et non toute la liste):
desired

J'ai essayé de présenter cela de la manière la plus simple que je pouvais penser ...

Answer 1

vous définissez le rayon des 4 coins. Vous voulez un coin arrondi juste en haut à droite et en haut à gauche.

-webkit-border-top-left-radius: 4px; 
-webkit-border-top-right-radius: 4px; 
-moz-border-radius-topleft: 4px; 
-moz-border-radius-topright: 4px; 
border-top-left-radius: 4px; 
border-top-right-radius: 4px;