Osama Arshad Osama Arshad - 6 months ago 9
CSS Question

Why isn't my dropdown appearing?

Here is the fiddle

https://jsfiddle.net/r2zmxzzd/

As you can see, the dropdown in the top menu "Alumni" is working but the dropdown in the lower menu i.e. "About UET" is not working.

I've been staring at the code for more than 2 hours but still can't get that damn dropdown to appear. I've tried inspecting the elements. The dropdown appears in the DOM as active but still doesn't show up.

Here is the code of the dropdown

<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>


Can anyone please tell me why the lower dropdown isn't appearing?

Thanks in advance.

Answer

You have this

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

and the dropdown is behind. Remove overflow:hidden

Comments