Почему не появляется выпадающее меню?

Question

Вот скрипку

https://jsfiddle.net/r2zmxzzd/

Как вы можете видеть, выпадающий в верхнем меню «Alumni» работает, но в раскрывающемся меню в нижнем меню т.е. «О UET» не работает.

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

Вот код выпадающего списка

<ul class="nav navbar-nav navbar-right"> 
    <li class="dropdown primaryNavItem"> 
     <a href="#" class="primaryNavLink dropdown-toggle" data-toggle="dropdown">About UET <span class="caret"></span></a> 
     <ul class="dropdown-menu"> 
      <li><a href="#" class="primaryNavDropDownLink">Historic Profile</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Vision &amp; Mission</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Development Projects</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Core Team Members</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">UET Progress Report 2015</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Student Teacher Ratio</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Information</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Faculty Statistics</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">FAQs</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Budget</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">External Linkages</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">International Funding</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Spin off companies</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Progress Profile</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Site map</a></li> 
      <li><a href="#" class="primaryNavDropDownLink">Contacts List</a></li> 
     </ul> 
    </li> 
</ul> 

Может кто-нибудь пожалуйста, скажите мне, почему нижний выпадающий не появляется?

Заранее спасибо.

Answer 1

У вас есть эта

header { 
    overflow: hidden; 
    height: 135px; 
} 

и выпадающее меню отстает. Удалить переполнение: скрытый

Answer 2

Это потому, что вы используете тег:

<a href="#" class="primaryNavLink dropdown-toggle" data-toggle="dropdown">About UET <span class="caret"></span></a> 

Должно быть:

<button type="button" class="primaryNavLink dropdown-toggle" data-toggle="dropdown">About UET <span class="caret"></span></button> 

И затем стиль в зависимости от обстоятельств

Answer 3

Вы должны использовать:

header { 
overflow: visible;} 

Answer 4

Ваш <header> имеет свойство overflow: hidden CSS. Это приводит к вырезанию выпадающего списка вне поля зрения.

Удалить overflow: hidden из вашего заголовка: https://jsfiddle.net/r2zmxzzd/1/

Answer 5

Привет ваш выпадающий работает нормально, но вы должны изменить CSS на скриншоте headersee

Благодаря