html css основное меню навигации не работает с зависанием

Question

Я просто хочу, чтобы эта навигация работала нормально.

<li class="nav-item" data-magellan-arrival="restaurant-menu" title="Restaurant Menu><a  class="scroll" href="#restaurant-menu">Menu </a> 
    <ul> 
    <li><a href="#">Breakfast</a></li> 
    <li><a href="#">Lunch</a></li> 
    <li><a href="#">Dinner</a></li> 
    </ul> 
</li> 

Я хочу, чтобы завтрак и ужин пообедали, когда я нависаю над «меню». Когда я стилю <ul> с display:none;, он никогда не выходит, и в противном случае он показывает все время ... Спасибо.

Некоторые CSS:

.nav-bar > li { 
    float: left; 
    display: block; 
    position: relative; 
    padding: 0; 
    margin: 0; 
    line-height: 39px;} 

ul.flyout, .nav-bar li ul { 
    padding: 0; 
    list-style: none;} 

.top-bar ul { 
    margin-left: 0; 
    display: inline; 
    height: 45px; 
    line-height: 10px; 
    list-style: none;} 

Answer 1

.nav-item > ul > li{ 
    display: none; 
} 

.nav-item:hover > ul >li { 
    display: block; 
} 

использовать приведенный выше код в

в этом Li скрыт при наведении на .nav элементе-он покажет скрытую Ли

Answer 2

Добавьте это в CSS:

.nav-item > ul { 
    display: none; 
} 

.nav-item:hover > ul { 
    display: block; 
    position: absolute; 
} 

Я сделал пример, используя код здесь: http://jsfiddle.net/jntahqkh/. position: absolute; должен помешать подменю вмешиваться в остальную часть контента на вашем сайте. Возможно, вам придется немного поиграть с ним, чтобы он отображался правильно на вашем сайте, но это должно по крайней мере привести вас к правильному пути. Кроме того, это может не работать на мобильных устройствах (Android/iOS) ... не уверен, как они справляются: селектора hover или если они даже делают.