html - 无法在 Bootstrap 3x 上隐藏子菜单

Question

我是网站开发新手。我有一些我自己无法解决的问题。为了您的信息，我使用了 Zerotheme 的模板。这里的链接你可以download查看完整的源代码。

Q > 因为我想在子菜单上使用“悬停”，所以如何隐藏第二级。 Screenshot

谁能帮我解决这个问题。

#menu {
    border-radius: 0;
    text-transform: uppercase;
    background: #fff;
}

body.sub-page #menu {
    padding: 10px 0;
}

#menu.navbar {
    margin: 0;
    min-height: auto
}

#menu #heading {
    float: left;
    padding-left: 15px;
    font-size: 20px;
    font-weight: 700;
    line-height: 40px;
    color: #fff;
    margin-top: 10px;
    text-transform: uppercase;
}

#menu .navbar-brand {
    margin: 0;
    height: auto;
    padding: 0px 18px;
}

#menu .navbar-brand img {
    max-width: 160px;
}

#menu .logo {}

#menu .dropdown-menu {
    background-color: #EDD9C0;
    border: none;
    border-radius: 0;
}

#menu ul.nav .dropdown-menu li a {
    color: #1a1c1e;
}

#menu ul.nav .dropdown-menu li a:hover {}

#menu .dropdown-inner {
    display: table;
}

#menu .dropdown-inner ul {
    display: table-cell;
}

#menu .dropdown-inner a {
    min-width: 160px;
    display: block;
    padding: 3px 20px;
    clear: both;
    line-height: 20px;
    color: #000;
    margin: 0 5px;
}

#menu li.dropdown:hover>a,
#menu li.dropdown:focus>a,
#menu li.dropdown:active>a {
    color: #3B3A36;
    background: none;
}

#menu ul.nav li {
    padding-right: 16px;
}

#menu ul.nav li a {
    padding: 8px 10px;
    color: #333;
    font-size: 14px;
    font-weight: bold;
}

#menu ul.nav li.dropdown a {}

#menu .nav>li>a:hover,
#menu .nav>li>a:focus {
    color: #3B3A36;
    background: none;
}

#menu .btn-navbar {
    font-size: 20px;
    color: #FFF;
    padding: 5px 15px;
    float: right;
    border: 3px solid #fff;
}


@media (min-width: 768px) {
    #menu ul.nav.navbar-nav {
        margin-top: 5px;
        display: inline-block;
        float: none;
    }

    #menu .dropdown:hover .dropdown-menu {
        display: block;
    }

    #menu .navbar-collapse {
        text-align: center;
    }

    body.sub-page #menu ul.nav.navbar-nav {
        margin-top: 5px;
        display: block;
        float: right;
    }
}

@media(max-width:767px) {

    #menu {
        background: #1D2027;
        padding: 10px 0;
    }

    #menu .navbar-brand {
        display: block;
        color: #fff;
        margin-top: 10px;
    }

    #menu div.dropdown-inner>ul.list-unstyled {
        display: block;
    }

    #menu .dropdown-inner a {
        width: 100%;
        color: #fff;
    }

    #menu div.dropdown-menu {
        margin-left: 0 !important;
        padding-bottom: 10px;
        background-color: rgba(0, 0, 0, 0.1);
    }

    #menu ul.nav li a {
        color: #fff;
    }

    #menu ul.nav li a:hover {
        color: #EDD9C0;
    }

    #menu ul.nav li.dropdown a {
        color: #fff;
    }

}

.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px 6px;
    border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}

.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #cccccc;
    margin-top: 5px;
    margin-right: -10px;
}

.dropdown-submenu:hover>a:after {
    border-left-color: #ffffff;
}

.dropdown-submenu.pull-left {
    float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
    left: -100%;
    margin-left: 10px;
    -webkit-border-radius: 6px 0 6px 6px;
    -moz-border-radius: 6px 0 6px 6px;
    border-radius: 6px 0 6px 6px;
}

<!--Navigation-->
<nav id="menu" class="navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <span id="heading" class="visible-xs">Categories</span>
      <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i
          class="fa fa-bars"></i></button>

    </div>
    <div class="collapse navbar-collapse navbar-ex1-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="index.html">Home</a></li>
        <li><a href="single.html">About Us</a></li>

        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Category <i class="fa fa-chevron-down"></i></a>
          <div class="dropdown-menu">
            <div class="dropdown-inner">
              <ul class="list-unstyled">
                <li><a href="archive.html">Text 301</a></li>
                <li><a href="archive.html">Text 302</a></li>
                <li><a href="archive.html">Text 303</a></li>
                <li><a href="archive.html">Text 304</a></li>
                <li><a href="archive.html">Text 305</a></li>
                <li class="dropdown-submenu"><a tabindex="-1" href="#">Text 314</a>
                  <ul class="dropdown-menu">
                    <li><a href="#">Second level</a></li>
                    <li><a href="#">Second level</a></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </li>
        <li><a href="archive.html">Blog</a></li>
        <li><a href="contact.html">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>

Answer 1

首先改变css的

#menu .dropdown:hover .dropdown-menu {display: block;}

到

#menu .dropdown:hover>.dropdown-menu {display: block;} 

因为悬停在下拉菜单上同时显示下拉菜单和删除

#menu .dropdown-inner {display: table;}
#menu .dropdown-inner ul {display: table-cell;}

因为它覆盖了 display:none 没有 hover

#menu {border-radius: 0;text-transform: uppercase;background: #fff;}
body.sub-page #menu {padding: 10px 0;}
#menu.navbar{margin: 0;min-height:auto}
#menu #heading {float: left;padding-left: 15px;font-size: 20px;font-weight: 700;line-height: 40px;color: #fff;margin-top: 10px;text-transform: uppercase;}
#menu .navbar-brand{margin: 0;height: auto;padding: 0px 18px;}
#menu .navbar-brand img{max-width: 160px;}
#menu .logo {}
#menu .dropdown-menu {background-color: #EDD9C0;border:none;border-radius: 0;}

#menu ul.nav .dropdown-menu li a{color: #1a1c1e;}
#menu ul.nav .dropdown-menu li a:hover{}
#menu .dropdown-inner a {min-width: 160px;display: block;padding: 3px 20px;clear: both;line-height: 20px;color: #000;margin: 0 5px;}
#menu li.dropdown:hover>a, #menu li.dropdown:focus>a, #menu li.dropdown:active>a{color: #3B3A36;background: none;}

#menu ul.nav li{padding-right: 16px;}
#menu ul.nav li a{padding: 8px 10px;color: #333;font-size: 14px;font-weight: bold;}
#menu ul.nav li.dropdown a{}
#menu .nav > li > a:hover, #menu .nav > li > a:focus{color:#3B3A36;background: none;}

#menu .btn-navbar {font-size: 20px;color: #FFF;padding: 5px 15px;float: right;border: 3px solid #fff;}


@media  (min-width: 768px) {
    #menu ul.nav.navbar-nav {margin-top: 5px;display: inline-block;float: none;}
    #menu .dropdown:hover>.dropdown-menu {display: block;}
    #menu .navbar-collapse {text-align: center;}

    body.sub-page #menu ul.nav.navbar-nav {margin-top: 5px;display: block;float: right;}
}

@media(max-width:767px) {

    #menu{background: #1D2027;padding: 10px 0;}
    #menu .navbar-brand {display: block;color: #fff;margin-top: 10px;}
    #menu div.dropdown-inner > ul.list-unstyled {display: block;}
    #menu .dropdown-inner a {width: 100%;color: #fff;}
    #menu div.dropdown-menu {margin-left: 0 !important; padding-bottom: 10px;background-color: rgba(0, 0, 0, 0.1);}
    #menu ul.nav li a{color: #fff;}
    #menu ul.nav li a:hover{color: #EDD9C0;}
    #menu ul.nav li.dropdown a{color: #fff;}

}

.dropdown-submenu{position:relative;}
.dropdown-submenu>.dropdown-menu{top:0;left:100%;margin-top:-6px;margin-left:-1px;-webkit-border-radius:0 6px 6px 6px;-moz-border-radius:0 6px 6px 6px;border-radius:0 6px 6px 6px;}
.dropdown-submenu:hover>.dropdown-menu{display:block;}
.dropdown-submenu>a:after{display:block;content:" ";float:right;width:0;height:0;border-color:transparent;border-style:solid;border-width:5px 0 5px 5px;border-left-color:#cccccc;margin-top:5px;margin-right:-10px;}
.dropdown-submenu:hover>a:after{border-left-color:#ffffff;}
.dropdown-submenu.pull-left{float:none;}.dropdown-submenu.pull-left>.dropdown-menu{left:-100%;margin-left:10px;-webkit-border-radius:6px 0 6px 6px;-moz-border-radius:6px 0 6px 6px;border-radius:6px 0 6px 6px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<!--Navigation-->
    <nav id="menu" class="navbar">
        <div class="container-fluid">
            <div class="navbar-header">
                 <span id="heading" class="visible-xs">Categories</span>
                 <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>

                </div>
                <div class="collapse navbar-collapse navbar-ex1-collapse">
                    <ul class="nav navbar-nav">
                        <li class="active"><a href="index.html">Home</a></li>
                        <li><a href="single.html">About Us</a></li>

                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Category <i class="fa fa-chevron-down"></i></a>
                            <div class="dropdown-menu">
                            <div class="dropdown-inner">
                                <ul class="list-unstyled">
                                    <li><a href="archive.html">Text 301</a></li>
                                    <li><a href="archive.html">Text 302</a></li>
                                    <li><a href="archive.html">Text 303</a></li>
                                    <li><a href="archive.html">Text 304</a></li>
                                    <li><a href="archive.html">Text 305</a></li>
                                    <li class="dropdown-submenu"><a tabindex="-1" href="#">Text 314</a>
                                <ul class="dropdown-menu">
                                    <li><a href="#">Second level</a></li>
                                    <li><a href="#">Second level</a></li>
                                </ul>
                        </li>
                    </ul>
                </div>
            </div>
                    </li>
                        <li><a href="archive.html">Blog</a></li>
                        <li><a href="contact.html">Contact</a></li>
                    </ul>
                </div>
            </div>
        </nav>