爲什麼我不能讓下拉菜單採用主菜單的功能？

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