折叠导航栏中的子菜单项

Question

我有以下菜单

（我不知道为什么它在折叠时不显示 3 个图标栏，但它们在那里，所以您可以将鼠标悬停在它上面并单击它，它会打开）

code

https://jsfiddle.net/x4mcq4h7/13/

我的问题是，当我将鼠标悬停在具有子菜单 (yogastyles) 的列表项 (yogaclasses) 上时，我实际上无法点击它，因为只要我用鼠标点击它，它就会消失。

我已经尝试改变 CSS 我有但没有运气，我也不知道我应该寻找什么或在哪里改变它...

我希望它的行为类似于当您浏览父列表项时，它会在底层列表项（事件菜单）上方显示子菜单，这样您就看不到事件菜单文本，当然可以实际上可以点击它:)

如果有人能在正确的方向上帮助我，我将不胜感激！

Answer 1

默认情况下bars & button border有一个透明的颜色，你需要给它们分配一个颜色，添加下面的CSS:

.navbar-toggle .icon-bar {
  background: #fff;
}

.navbar-toggle {
  border: 1px solid #fff;
}

看看下面的代码片段：

a,
#home-slider .caption h1 span,
#twitter-carousel .item span,
#footer .footer-bottom,
#single-portfolio .close-folio-item:hover,
.single-table.featured .btn.btn-primary,
.contact-info ul li a:hover,
#footer .footer-bottom a {
    color: #8E8C21;
}

.btn.btn-primary:hover {
    background-color: lightgoldenrodyellow;
    color: #CACA4D;
    border-color: #CACA4D;
}

.btn-submit {
    background-color: transparent;
    border: 1px solid #CACA4D;
}

    .btn-submit:hover {
        background-color: #CACA4D;
    }

.btn-primary:hover {
    background-color: #8E8C21;
    border-color: #CACA4D;
}

a:hover, a:focus {
    color: #CACA4D; /*#027db3;*/
}

.main-nav,
.service-icon,
.progress-bar.progress-bar-primary,
.single-table.featured,
.btn.btn-primary,
.twitter-icon .fa-twitter,
.twitter-left-control:hover, .twitter-right-control:hover,
.post-icon,
.entry-header .date:after,
.btn-loadmore:hover,
#footer,
.caption .btn-start:hover,
.left-control:hover,
.right-control:hover,
.folio-overview a:hover {
    background-color: #C9C903;
}

    /*.main-nav{
    min-height:60px;
}*/

    .main-nav ul li a {
        border-radius: 4px;
        height: 50px;
    }

        .main-nav ul li a:hover {
            background-color: #F7F7CD;
            color: #CACA4D;
        }

.twitter-left-control:hover,
.twitter-right-control:hover,
.btn-loadmore:hover {
    border: 1px solid #C9C903;
}

.caption .btn-start:hover,
.left-control:hover,
.right-control:hover {
    border-color: #CACA4D; /*#028fcc;*/
}

.twitter-icon .fa-twitter:after {
    border-color: #CACA4D;
    transparent transparent;
}

/*------------------------------------------*/

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #CECB26;
    min-width: 180px;
    border-radius: 4px;
}

    .dropdown-content a {
        display: block;
        text-align: center;
    }

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

.navbar-toggle .icon-bar {
  background: #fff;
}

.navbar-toggle {
  border: 1px solid #fff !important;
}

.dropdown-content {
  width: 100%;
  z-index: 10;
}

.dropdown-content a {
  text-align: left;
  padding: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="main-nav">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>               
            
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li class="scroll active"><a href="#"><i class="fa fa-home fa-lg" aria-hidden="true"></i>  Home</a></li>
                    <li class="scroll dropdown">
                        <a href="#"><i class="fa fa-universal-access fa-lg"></i>Yogaclasses</a>
                        <div class="dropdown-content">
                            <a href="#"><i class="fa fa-universal-access fa-lg" aria-hidden="true"></i>  Yogastyles</a>
                        </div>
                    </li>
                    <li class="scroll"><a href="#"><i class="fa fa-calendar fa-lg" aria-hidden="true"></i> Events</a></li>                    
                    <li class="scroll"><a href="#"><i class="fa fa-phone-square fa-lg" aria-hidden="true"></i>  Contact</a></li>
                </ul>
            </div>
        </div>
    </div><!--/#main-nav-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

希望对您有所帮助！

Answer 2

您需要添加可以正常工作的 z-index 并使 link 可点击，

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #CECB26;
    min-width: 180px;
    border-radius: 4px;
    z-index:9;/*Add this*/
}

检查此更新jsFiddle

折叠导航栏中的子菜单项

Submenu item in collapsed navbar

html

css

submenu

navbar