Css dropdown navbar issue

Question

Я создаю выпадающее меню css navbar, и у меня есть некоторые проблемы. Я не самый опытный человек в css, поэтому небольшая помощь будет оценена. Текст продуктов не меняет цвет, как на других, и вы можете только щелкнуть по тексту окна продукта. Также выпадающий список не расположен горизонтально с полем продуктов.

Вот ссылка на jsfiddle: https://jsfiddle.net/epp0zmd6/

Код (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> 

код (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

первой ошибка состоит в том, всегда ставить якорь тег внутри Li тега и вторая ошибка заключается в использовании выпадающего уль> li> а и чем, начало child ul перед закрытием li и после закрытия анкерного тега

и для правильного нажатия у меня есть прокладка на анкерной метке с свойством встроенного блока отображения.

У меня есть обновленная скрипка, я думаю, вы хотите что-то вроде этого попробуйте это, надеюсь, что код вам поможет.

.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

Вы ссылки на вашей записи "Продукты", что это слишком много:

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

т.д.

Просто удалите один.

Что касается позиции выпадающего меню: добавить

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