为什么我不能使下拉菜单采用主菜单的功能？

Question

我已经下载了一个我非常喜欢的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>

这是我可能搞砸了的CSS部分。 ：）

   /* 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 ul {
    position: absolute;
    /* this is what orders the nested links to appear in a block under the main ul*/
    visibility: hidden;
    top: 32px;
    left:0;
}
.nav ul 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*/
    ;
}

Answer 1

您正在定位一个元素，该元素位于您想要定位的元素的下方：

.nav ul ul

更改为

.nav ul

但这里有完整的解决方案：

HTML：

<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>

CSS：

/* 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*/ ;
}