메인 메뉴의 기능을 드롭 다운 메뉴로 가져올 수없는 이유는 무엇입니까?

Question

나는 정말로 좋아하고 나의 필요에 맞게 수정하고 싶은 HTML 템플릿을 다운로드했다. 문제는 드롭 다운 메뉴가 없다는 것입니다 .... 그래서 나는 HTML에 하나를 추가하고 그것을위한 CSS 스타일링을 만들기로 결정했습니다.

불행하게도 이것은 내가 무엇을 얻을 수 있습니다. 메뉴가 아래로 확장되고 드롭 다운 메뉴 항목이 계속 표시됩니다. 나는이 문제가 CSS 파일에 있다는 것을 확신하지만, 누군가가 CSS를 변경/포맷하여 해당 드롭 다운 메뉴가 나타나거나 사라지지 않고 메인 메뉴와 동일한 포맷을 갖도록하는 방법을 안내해 줄 수 있습니까?

<!-- 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의 일부입니다

이

는 HTML 코드입니다. :)

/* 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 :

96,747,669,그리고 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*/ ; 
}