Question

因此，我一直在使用自定义菜单，我在折叠菜单时遇到问题，并且其中包含下拉菜单列表项。在导航栏折叠后使用视口查看并单击下拉菜单＆＃34; Dropdown＆＃34;当您将鼠标悬停在它们上方时，四个列表元素具有透明背景，如果在视口是移动设备的大小时向下滚动页面，则下拉元素也不会滚动。

我的 overflow-y 是可见的，因为我希望用户能够向下滚动页面，理想情况下是折叠下拉列表项目的手风琴风格（我可以＆＃39; t弄明白，并没有单独的滚动条只是为了下拉。有没有办法让折叠，下拉列表项目没有透明背景，并且已经下拉的菜单可以使用常规页面滚动滚动？我希望这个连贯的大声笑，让我知道这应该是两个问题。我已经包含了我的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-fixed-top

navbar

已移除padding-top: 120px;上的body以将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

中查看

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

1 个答案: