html - 如何在 bootstrap 3.3.7 的导航栏下方添加下拉菜单

Question

所以我试图让我的下拉菜单真正出现在导航栏下方，如图所示

这是我的 html:`

<div class="container">


    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed"
                    data-toggle="collapse" data-target="#myNavbar">
                    <span class="sr-only">Toggle navigation</span> <span
                        class="icon-bar"></span> <span class="icon-bar"></span> <span
                        class="icon-bar"></span>
                </button>
                <a class="navbar-brand logo" href="#"></a>
            </div>

            <div class="collapse navbar-collapse navbar-right" id="myNavbar">
                <ul class="nav navbar-nav">
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                        data-toggle="dropdown" role="button" aria-expanded="false">blah
                            <!-- <span class="caret"></span> -->
                    </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">blah1</a></li>
                            <li><a href="#">blah 2</a></li>
                            <li><a href="#">blah 3</a></li>
                        </ul></li>
                    <li><a href="#">blah</a></li>
                    <li class="dropdown"><a href="#" class="dropdown-toggle"
                        data-toggle="dropdown" role="button" aria-expanded="false">blah
                    </a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="#">blah</a></li>
                            <li><a href="#">blah &amp; blah</a></li>
                            <li><a href="#">blah</a></li>
                        </ul></li>
                    <li><a href="#"> blah</a></li>
                    <li><a href="#">blah</a></li>
                    <li><a href="#"><img src="../images/search.png"/></a></li>
                    <li><a href="#">Login</a></li>
                </ul>
            </div>
        </div>
    </nav>

</div>

这是我的CSS:

.icon--house, .modal button, article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block
}

.navbar-default {
background-color: #030303 !important;
border: #030303;
}

.nav > li > a {
 padding: 25px 20px;
 font-size: 16px;
 }

 /* bigger menu items in dropdown */
.dropdown-menu > li > a {
padding: 20px;
}

 /* removes whitespace in dropdown from navbar */
.dropdown-menu {
padding: 0;
float: right;
left: 50% !important;
right: auto !important;
text-align: center !important;
transform: translate(-50%, 0) !important;
}

.dropdown:hover .dropdown-menu {
  display: block;
}

.dropdown-menu>li>a:hover {
color: #FFF;
background-color: #da1a32;
text-decoration: none;
}

.navbar .navbar-nav > li > a {
color: #FFF !important;
border-bottom: transparent solid 3px;
padding-bottom: 5px;
}

.navbar .navbar-nav > li > a:hover {
border-bottom: #da1a32 solid 3px;
}

a:link {
text-decoration: none;
color: #FFF !important;
}
a:visited {
text-decoration: none;
color: #FFF;
}
a:hover {
text-decoration: none;
color: #FFF;
}
a:active {
text-decoration: none;
color: #FFF;
}

.align-center, .missing {
text-align: center
}

body {
font-family: Montserrat, sans-serif;
font-weight: 300;
line-height: 1.4;
color: #202020;
overflow-x: hidden
}

img {
max-width: 100%;
height: auto
}

a {
transition: .3s ease;
text-decoration: none
}

h1 {
font-size: 30px;
line-height: 1.1;
margin-bottom: .5em
}

这是我希望它显示的样子:

这就是与实际导航栏重叠的样子:

我尝试了一些不同的方法，例如在页眉底部添加边距，但没有帮助。如果有人可以提供帮助，将不胜感激，因为我不确定从这里去哪里。如果您还可以确切地告诉我需要更改的 CSS 是什么，那就太好了。谢谢。

Answer 1

您只需调整 .dropdown-menu 类的“top”值，它是绝对定位的。现在可能是 100%

.dropdown-menu {
  top: 100%;
}

这将使它与 li.dropdown > 元素的底部对齐， 所以如果你有 20 px 的导航栏填充黑色背景，试试这个:

.dropdown-menu {
  top: calc(100% + 20px);
}