트위터 부트 스트랩 메뉴 드롭 다운, 높이 문제, 호버시

Question

부트 스랩을 사용하여 navbar를 만들었으며 내부 메뉴가 추가 CSS가있는 마우스 위에 자동으로 드롭 다운됩니다. 화면 크기를 모바일로 축소하고 드롭 다운이있는 항목에 마우스를 올리면 내 제품의 "제품"에 드롭 다운 외에 표시되는 추가 스크롤 막대가 있고 숨겨져있는 항목은 거의 없습니다.

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
     <div class="navbar-header"> 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
    <a class="navbar-brand" href="#">Brand Name</a></div> 
     <div id="navbar" class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav"> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About Us</a></li> 
     <li class="dropdown"> 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products</a> 
     <ul class="dropdown-menu"> 
      <li><a href="#">One</a></li> 
      <li><a href="#">Two</a></li> 
      <li><a href="#">Three</a></li> 
      <li><a href="#">Four</a></li> 
      <li><a href="#">Five</a></li> 
      <li><a href="#">Six</a></li> 
     </ul> 
     </li> 
     <li><a href="#">Contact Us</a></li> 
    </ul> 
    </div> 
</nav> 

CSS 코드 :

.dropdown:hover .dropdown-menu { 
    display: block; 
} 

나는 문제는 네비게이션 바의 높이라고 생각 여기

는 code pen link

HTML 코드입니다. 드롭 다운 외에 스크롤 바를 없애고 드롭 다운 메뉴를 표시 할 때 탐색 표시 줄이 확장 될 수 있는지 확인하려면 어떻게합니까?

Answer 1

처음에는 작은 뷰포트에서 hover을 사용하지 않으므로 미디어 쿼리에서 규칙을 래핑하면됩니다. 그것은 스크롤하게 auto` : .navbar 붕괴-in` 오버플-Y '갖는다'340px` ..하고 :

실시 예의

@media (min-width: 767px) { 
 
    .dropdown:hover .dropdown-menu { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation"> 
 
    <div class="navbar-header"> 
 
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="true" aria-controls="navbar"> 
 
     <span class="sr-only">Toggle navigation</span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
    </button> 
 
    <a class="navbar-brand" href="#">Brand Name</a> 
 
    </div> 
 

 
    <!-- Top Navigation --> 
 
    <div id="navbar" class="navbar-collapse collapse"> 
 
    <ul class="nav navbar-nav"> 
 
     <li><a href="#">Home</a> 
 
     </li> 
 
     <li><a href="#">About Us</a> 
 
     </li> 
 
     <li class="dropdown"> 
 
     <a href="#" class="dropdown-toggle" data-toggle="dropdown">Products</a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">One</a> 
 
      </li> 
 
      <li><a href="#">Two</a> 
 
      </li> 
 
      <li><a href="#">Three</a> 
 
      </li> 
 
      <li><a href="#">Four</a> 
 
      </li> 
 
      <li><a href="#">Five</a> 
 
      </li> 
 
      <li><a href="#">Six</a> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li><a href="#">Contact Us</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</nav>