Twitter bootstrap Меню Выпадающее меню, высота вопроса, при наведении

Question

Am, используя Bootstrap для создания навигационной панели, и ее внутреннее меню автоматически опускается вниз с помощью дополнительного CSS. Когда мы уменьшаем размер экрана до мобильного и нажимаем на элемент с падением - в моем случае это «Продукты», есть дополнительная полоса прокрутки, которая появляется, кроме раскрывающегося списка, и несколько элементов скрываются.

Вот code pen link

HTML код:

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

Я думаю, что вопрос с высоты навигационной панели. Как избавиться от полосы прокрутки, кроме раскрывающегося списка, и посмотреть, может ли navbar расширяться при отображении выпадающего меню.

Answer 1

Просто обведите свое правило в медиа-запрос, потому что hover не будет использоваться в небольших видовых экранах в первую очередь.

Рабочий пример

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