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

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 Im努力去理解为什么当每个子选项包含在'dropdown-menu'ul类中时，100％选项不能覆盖整个区域？

Answer 1

在引导.dropdown-menu类position: absolute;在那里。所以百分比的高度不会工作。如果从下拉类中删除position: absolute;，高度的百分比正在工作。