Question

这是小提琴

正如您所看到的，顶部菜单“Alumni”中的下拉列表正在运行，但下方菜单中的下拉菜单“About UET”无效。

我一直盯着代码超过2个小时，但仍然无法让那个该死的下拉列表出现。我试过检查这些元素。下拉列表在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

你必须使用：

header {
overflow: visible;}

Answer 3

您的<header>有一个overflow: hidden css属性。这导致下拉列表被裁掉了。

从标题中删除overflow: hidden：https://jsfiddle.net/r2zmxzzd/1/

Answer 4

您的下拉列表工作正常，但您必须更改headeree screenshot 上的css

由于

Answer 5

这是因为您正在使用标签：

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

然后根据需要设置风格

为什么我的下拉不出现？

5 个答案: