Css dropdown navbar numéro

Question

Je fais une liste déroulante navss css, et j'ai quelques problèmes. Je ne suis pas la personne la plus expérimentée en CSS, donc un peu d'aide serait apprécié. Le texte des produits ne change pas de couleur, comme sur les autres et vous ne pouvez cliquer que sur le texte de la boîte de produits. La liste déroulante n'est pas non plus alignée horizontalement avec la boîte de produits.

Voici un lien vers jsFiddle: https://jsfiddle.net/epp0zmd6/

code (HTML):

<div class="navbar"> 
     <ul> 
      <a href="#"><li class="active">Homepage</li></a> 
      <a href="#"><li>Contact Us</li></a> 
      <a href="#"><li>Web Learning Platform</li></a> 
      <a href="#"><li><a href="#">Products</a> 
       <ul> 
        <a href="#"><li>Requirement Extraction & Analysis</li></a> 
        <a href="#"><li>Early Deduction Modelling & Analysis</li></a> 
       </ul> 
      </li></a> 
     </ul> 
    </div> 

code (CSS):

.navbar ul { 
    display: inline-table; 
    vertical-align: middle; 
    list-style: none; 
    position: relative; 
} 
.navbar ul:after { 
    content: ""; 
    clear: both; 
    display: block; 
} 
.navbar ul ul { 
    display: none; 
    border-radius: 0; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
} 
.navbar ul ul li { 
    float: none; 
    position: relative; 
} 
.navbar ul li:hover > ul { 
    display: block; 
} 
.navbar ul li { 
    background-color: #0A6CA3; 
    display: inline-block; 
    vertical-align: middle; 
    font-family: SinkinSans; 
    font-size: 20px; 
    padding-top: 27px; 
    padding-bottom: 21px; 
    padding-left: 10px; 
    padding-right: 10px; 
    color: #FFFFFF; 
    transition: all 0.8s; 
    -moz-transition: all 0.8s; 
    -webkit-transition: all 0.8s; 
    -o-transition: all 0.8s; 
    margin-left: -2px; 
    margin-right: -2px; 
    float: left; 
} 
.navbar ul li:hover { 
    background-color: #FFFFFF; 
    color: #00A3FF; 
} 
.navbar ul a { 
    text-decoration: none; 
} 
.navbar ul a:visited { 
    color: #FFFFFF; 
} 
.navbar ul a:hover { 
    color: #00A3FF; 
} 
.navbar ul .active { 
    background-color: #FFFFFF; 
    color: #00A3FF; 
} 

Answer 1

la première erreur est, toujours mettre balise d'ancrage dans la balise li et deuxième erreur est l'utilisation déroulante ul> li> a et que, début enfant ul avant la fermeture li et après la fermeture de l'étiquette d'ancrage

et pour un clic correct j'ai mis padding sur l'étiquette d'ancrage avec la propriété de bloc en ligne d'affichage.

J'ai mis à jour le violon je pense que vous voulez quelque chose comme ceci, essayez ceci, espérons que le code vous aidera.

.navbar ul { 
 
\t display: inline-table; 
 
\t vertical-align: middle; 
 
\t list-style: none; 
 
\t position: relative; 
 
} 
 
.navbar ul:after { 
 
\t content: ""; 
 
\t clear: both; 
 
\t display: block; 
 
} 
 
.navbar ul ul { 
 
\t display: none; 
 
\t border-radius: 0; 
 
\t padding: 0; 
 
\t position: absolute; 
 
\t top: 100%; 
 
} 
 

 
.navbar ul li:hover > ul { 
 
\t display: block; 
 
} 
 
.navbar ul li { 
 
\t display: inline-block; 
 
\t margin-left: -2px; 
 
\t margin-right: -2px; 
 
\t float: left; 
 
} 
 
.navbar ul li >a{ 
 
\t padding-top: 27px; 
 
\t padding-bottom: 21px; 
 
\t padding-left: 10px; 
 
\t padding-right: 10px; 
 
    display:inline-block; 
 
    color:#fff; 
 
    \t text-decoration: none; 
 
     \t background-color: #0A6CA3;vertical-align: middle; 
 
\t font-family: SinkinSans; 
 
\t font-size: 20px; 
 
\t transition: all 0.8s; 
 
\t -moz-transition: all 0.8s; 
 
\t -webkit-transition: all 0.8s; 
 
\t -o-transition: all 0.8s; 
 

 
} 
 
.navbar ul li:hover >a, 
 
.navbar ul li.active >a{ 
 
\t background-color: #FFFFFF; 
 
    \t text-decoration: none; 
 
\t color: #00A3FF; 
 

 
}

<div class="navbar"> 
 
    <ul> 
 
     <li class="active"><a href="">Homepage</a></li> 
 
     <li><a href="">Contact Us</a></li> 
 
     <li><a href="">Web Learning Platform</a></li> 
 
     <li><a href="">Products</a> 
 
      <ul> 
 
      <li><a href="">Requirement Extraction & Analysis</a></li> 
 
      <li><a href="">Early Deduction Modelling & Analysis</a></li> 
 
      </ul> 
 
     </li> 
 

 
    </ul> 
 
</div>

Answer 2

Vous avez liens sur votre entrée "Produits", c'est trop:

<a href="#"><li><a href="#">Products</a> 

etc.

Il suffit de supprimer un.

En ce qui concerne la position de la liste déroulante: ajouter

.navbar ul li { left: -8px; }