CODEWITHSUNDEEP
csstwitter-bootstrap
asamolion
asamolion

Reputation: 848

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.

Upvotes: 0

Views: 71

Answers (5)

user2748042
user2748042

Reputation:

Hi your dropdown is working fine but you have to change css on headersee screenshot enter image description here

Thanks

Upvotes: 3

casraf
casraf

Reputation: 21694

Your <header> has an overflow: hidden css property. That's causing the dropdown to be clipped out of view.

Remove overflow: hidden from your header: https://jsfiddle.net/r2zmxzzd/1/

Upvotes: 3

WilsonWilson
WilsonWilson

Reputation: 166

You have to use:

header {
overflow: visible;}

Upvotes: 3

user4994625
user4994625

Reputation:

You have this 

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

and the dropdown is behind. Remove overflow:hidden

Upvotes: 3

Matt Muirhead
Matt Muirhead

Reputation: 53

It's because you're using an a tag:

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

Should be:

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

And then style as appropriate

Upvotes: 1

Related Questions