HTML CSS下拉菜单-不工作

Question

嗨，我已经创建了这个菜单，但我无法弄清楚为什么我的二级导航菜单不工作。这是我的HTML代码

<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
    <li class="hidden">
        <a class="page-scroll" href="#page-top"></a>
    </li>
    <li>
        <a class="page-scroll" href="#">HOME</a>
    </li>
    <li>
        <a class="page-scroll" href="#">ABOUT</a>
    </li>
    <li>
        <a class="page-scroll" href="#">SERVICES</a>
    </li>
    <li>
        <a class="page-scroll" href="#">LOCATIONS</a>
        <ul class="sub-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li><a href="#">New York</a></li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li>
        <a class="page-scroll" href="#">CONTACT US</a>
    </li>
</ul>

和我做了这个CSS技巧，可能是做了一些愚蠢的错误或错误的东西:(

.nav {padding-left: 0;
      margin-bottom: 0;
list-style: none;
font-family:'open_sansbold_italic';
}
.nav>li {
margin: -1px !important;
position: relative;
display: block;
}
.nav>li>a {
background-color: #ececec !important;
position: relative;
display: block;
padding: 10px 15px;
}
.nav>li>a:focus, .nav>li>a:hover {
text-decoration: none;
background-color: #eee;
}
.nav>li.disabled>a {
color: #777;
}
.nav>li.disabled>a:focus, .nav>li.disabled>a:hover {
color: #777;
text-decoration: none;
cursor: not-allowed;
background-color: transparent;
}
.navbar-fixed-top {
top:0;
right:0;
left:0;
position: fixed;
border-width: 0 0 1px;
z-index: 1030;
}
.navbar-fixed-top .navbar-collapse {
max-height: 340px;
}
.navbar {
min-height: 53px;
/*margin-bottom: 10px; */
}
.navbar .sub-menu{
position: absolute;
top: 30px;
left: 0;
width: 150px;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.navbar .sub-menu li{
position: relative;
height: 30px;
background: #999999;
}
.navbar .sub-menu li:hover{ background: #CCCCCC;
}

请指导我或帮助我，因为我无法完成它:(

Answer 1

您错误地标记了子菜单的ul类名称。它实际上是一个dropdown-menu。

编辑:锚标记也需要class="dropdown-toggle" data-toggle="dropdown" role="button"属性，以便作为一个嵌套菜单的功能。参考bootstrap网站上的导航条示例，并更仔细地遵循它们的代码。我已经固定了当前的HTML片段如下:

<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
    <li class="hidden">
        <a class="page-scroll" href="#page-top"></a>
    </li>
    <li>
        <a class="page-scroll" href="#">HOME</a>
    </li>
    <li>
        <a class="page-scroll" href="#">ABOUT</a>
    </li>
    <li>
        <a class="page-scroll" href="#">SERVICES</a>
    </li>
    <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">LOCATIONS <span class="caret"></span></a>
        <ul class="dropdown-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li><a href="#">New York</a></li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li>
        <a class="page-scroll" href="#">CONTACT US</a>
    </li>
</ul>

你可以在bootply