引导导航栏下拉菜单背景不起作用

Question

为了尽可能简化这一点，我基本上是在页面中添加一个引导导航栏，其中一个选项卡有一个下拉菜单，其中有 5 个子选项可供选择。我发现背景只显示在第一个子选项的底部。 CSS 将高度设置为 100%，这就是我想要的，如果我将 CSS 更改为 500px；它将扩大该地区。

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>
        <div class="collapse navbar-collapse" id="myNavbar">
            <ul class="nav navbar-nav">
                <li><a class="active" href="index.html">Home</a></li>
                <li><a class="li" href="whatido.html">What I Do</a></li>
                <li class="dropdown">
                    <a class="dropdown-toggle" data-toggle="dropdown"    href="#">Travels<span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Asia</a></li>
                        <li><a href="#">Europe</a></li>
                        <li><a href="#">Scotland</a></li>
                        <li><a href="#">Other</a></li>
                        <li><a href="#">And Another</a></li>
                    </ul>
                </li>
                <li><a class="li" href="upcomingtrips.html">Upcoming Trips</a></li>
                <li><a class="li"href="aboutme.html">About Me</a></li>
                <li><a class="li" href="gallery.html">Gallery</a></li>
                <li><a class="li" href="contactpage.html">Contact</a></li>
            </ul>
        </div>
    </div></nav>
</nav>

下拉菜单的css很简单

  .dropdown-menu {
      height:100%;
}

结果：

adjustable size 但是，如果我将 css 更改为

  .dropdown-menu {
      height:300px;
}

我得到了这个结果

fixed size 当每个子选项都包含在“下拉菜单”ul 类中时，我很难理解为什么 100% 选项不能覆盖整个区域？

Answer 1

在.dropdown-menu 的引导程序中，有position: absolute; 类。所以百分比高度不起作用。如果从下拉类中删除position: absolute;，则高度百分比正在起作用。