Javascript 为什么可以'；我不能让下拉菜单具有主菜单的功能吗？

我已经下载了一个HTML模板，我真的很喜欢，并想修改我的需要。问题是它没有下拉菜单…所以我决定在HTML中添加一个，并为它创建CSS样式

不幸的是，这是我得到的。菜单向下扩展，下拉菜单项始终存在。我很确定问题出在css文件中，但是有人能指导我如何更改css的格式，使下拉菜单在悬停时出现/消失，并与主菜单具有相同的格式吗

这是HTML代码：

<!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav">
            <li class="active"><a href="index.html">Home</a>
            <ul>
            <li><a href="#">Spanish</a>

            </li>
            <li><a href="#">English</a>

            </li>
            <li><a href="#">French</a>

            </li>
            <li><a href="#">German</a>

            </li>
        </ul>
    </li>
            <li><a href="#">Technologies</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="contact.html">Contact</a></li>
          </ul>
        </div><!-- /.navbar-collapse -->
        <!-- start soc_icons -->
    </nav>

---

您所针对的图元位于要针对的图元的“下方”：

.nav ul ul

---

是的，你把你的css搞砸了。看看这个。。。这也许能让你走上正确的方向。尽管问题略有不同。 .nav ul ul .nav ul

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
    <li class="active"><a href="index.html">Home</a>
      <ul>
        <li><a href="#">Spanish</a></li>
        <li><a href="#">English</a></li>
        <li><a href="#">French</a></li>
        <li><a href="#">German</a></li>
      </ul>
    </li>
    <li><a href="#">Technologies</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="blog.html">Blog</a></li>
    <li><a href="contact.html">Contact</a></li>
  </ul>
</div>

/* menu */
.h_menu{
  padding: 0;
  background: #3B3B3B;
}
.navbar {
  position: relative;
  min-height: 60px;
  margin-bottom: 0px;
  border: none;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
  background: #3B3B3B;
  color: #ffffff;
  padding: 0;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover{
  background: #FF5454;
  color: #ffffff;
}
.navbar-default .navbar-nav > li > a {
  color: #fff;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.nav > li {
  border-right: 1px solid rgb(39, 37, 37);
}
.nav > li > a {
  font-size: 13px;
  padding: 20px 30px;
  text-transform: uppercase;
}

/* dropdown menu */
.nav ul {
  /* this is what orders the nested links to appear in a block under the main ul*/
  position: absolute;
  visibility: hidden;
  top: 32px;
  left: 0;
}
.nav li:hover ul {
/* this is what makes the dropdown menu appear on hovering over it*/
  visibility: visible;
}
.nav li:hover {
  background: #ff5454;
  /* main menu box changes to this color (also the submenus) on hovering over it, red in this case*/ ;
}