html - 导航栏折叠后下拉列表项具有透明背景

Question

所以我一直在研究自定义菜单，但在折叠菜单和其中包含的下拉菜单列表项方面遇到了问题。当您在导航栏折叠后查看视口(viewport)并单击下拉菜单“下拉”时，当您将鼠标悬停在它们上方时，四个列表元素具有透明背景，如果您在视口(viewport)为移动设备大小时向下滚动页面，则下拉元素也不要滚动。

我的 overflow-y 是可见的，因为我希望用户能够向下滚动页面，最好是折叠下拉列表项的 Accordion 样式(我无法想象out)，并且没有单独的滚动条用于下拉列表。有没有办法让折叠的下拉列表项没有透明背景，并且已经下拉的菜单可以使用常规页面滚动器滚动？我希望这足够连贯，大声笑，让我知道这是否应该是两个问题。我包含了我的 HTML 和完整的 CSS

<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-parent="#accordion" data-target="#topFixedNavbar1"  aria-expanded="false"><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" href="#"><h2>LOGO</h2></a></div>
  <!-- Collect the nav links, forms, and other content for toggling -->
  <div class="collapse navbar-collapse" id="topFixedNavbar1">



    <ul class="nav navbar-nav navbar-right links">
      <li><a href="#"><h5>Link 1</h5></a></li>
      <li><a href="#"><h5>Link 2</h5></a></li>

      <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" data-parent="#accordion" role="button" aria-haspopup="true" aria-expanded="false"><h5>Dropdown</h5></a>
        <ul class="dropdown-menu">
          <li><a href="#">Action</a></li>
          <li><a href="#">Another action</a></li>
          <li><a href="#">Something else here</a></li>

          <li><a href="#">Separated link</a></li>
        </ul>
      </li>
      <li><a><span class="label label-danger  home-label" >Give us a call! &nbsp;</span></a></li>
    </ul>
  </div>
  <!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->

CSS 文件

@media (min-width: 991px) {
.dropdown:hover .dropdown-menu {
display: block;
}
}
body{
padding-top: 120px; 
background-color:#34A0CD;
}


.navbar-default{
height:120px;
}
.navbar-header, .navbar-brand{
height:120px;
padding-top: 0px;
padding-right: 0px;
padding-bottom: 0px;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;   
}
home-label{
font-size:17px;
margin-right:35px;

}
.navbar-nav li span{
font-size:17px;
margin-right:35px;
line-height:130px;
}

#topFixedNavbar1{
height:120px;
}
.links{
height:120px;

}
.navbar-nav li a h5{
line-height:80px;
}
.dropdown li a {
line-height:30px;
}
@media (max-width: 991px) {
.dropdown li a{
    line-height:30px;
}

.collapse.navbar-collapse{
    width:100%;

}
.links li a{

    width:100%;
}

.navbar-collapse .navbar-nav>li>a:hover,
.navbar-collapse .navbar-nav>li>a:focus,
.navbar-collapse .navbar-nav .dropdown .dropdown-menu>li>a:hover
.navbar-collapse .navbar-nav .dropdown .dropdown-menu>li>a:focus
{
background-color: gray;
}
.navbar-header {
    float: none;
}
.navbar-toggle {
    display: block;
}
.navbar-collapse {
    border-top: 1px solid transparent ;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);

}

.navbar-collapse.in {
overflow-y: visible;
}

.navbar-collapse.collapse {
    display: none!important;

}
.navbar-nav {
    float: none!important;

}
.navbar-nav>li {
    float: none;
}
.navbar-nav li a h5{
line-height: 15px;
background-color: gray;
color: #F1E9E9;     
}
.navbar-nav li a span{
    line-height:15px;
    background-color:gray;
}
.navbar-nav li a{
    background-color:gray;
    width:100%;
}


.navbar-text {
    float: none;
    margin: 15px 0;
}
/* since 3.1.0 */
.navbar-collapse.collapse.in { 
    display: block!important;
}
.collapsing {
    overflow: hidden!important;
}

Answer 1

navbar-fixed-top 类使 nav 成为固定元素，您不能在不声明特定宽度/高度的情况下使固定元素可滚动。所以，我

• 从 navbar 中移除了 navbar-fixed-top
• 删除了 body 上的 padding-top: 120px; 以将 navbar 对齐到顶部

• 针对透明背景问题对下拉菜单进行了一些更改。

  @media (max-width: 991px) {
      .navbar-nav li.open a h5 {
          color: black;
          background: 0 0;
      }
      .navbar-default .navbar-nav .open .dropdown-menu>li>a {
          color: white;
      }
      .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover,
      .navbar-default .navbar-nav .open .dropdown-menu>li>a:focus {
          background-color: white;
          color: black;
      }
  }
  

  您可以根据需要更改“主题”。

检查 action