Мобильная навигация не статична

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

Может кто-нибудь помочь мне исправить это, я уже пытался в течение 90 минут:/

JSFiddle: https://jsfiddle.net/dxmbc5p6/

Весь код в Jsfiddle:

<body class="animated fadeIn"> 
    <div class="nav animated fadeInDown"> 
     <img src="hamburger.png" alt="" class="hamburger"> 
     <div class="logo"> 
      <h1>TITLE</h1> 
     </div> 
     <ul> 
      <li> 
       <a href="#">PAGE</a> 
       <ul> 
        <li><a href="#">DROPDOWN</a></li> 
        <li><a href="#">DROPDOWN</a></li> 
       </ul> 
      </li> 
      <li><a href="#">PAGE</a></li> 
      <li><a href="#">PAGE</a></li> 
      <li><a href="#">PAGE</a></li> 
     </ul> 
    </div> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
</body> 

* { 
    padding: 0; 
    margin: 0; 
    border: 0; 
} 

html, body { 
    height: 100%; 
    width: 100%; 
    font-family: 'Open Sans', sans-serif; 
} 

h1 { 
    font-weight: 300; 
    font-size: 50px; 
} 

.nav { 
    width: 100%; 
    height: 10%; 
    background-color: #FFF; 
    text-align: center; 
    position: fixed; 
    z-index: 999; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 

.nav .hamburger { 
    display: none; 
} 

.nav .logo { 
    float: left; 
    margin-left: 150px; 
} 

.nav .logo h1 { 
    color: #222; 
    line-height: 10vh; 
    font-size: 32px; 
} 

.nav > ul { 
    height: 100%; 
    width: auto !important; 
    display: inline-block; 
    float: right; 
    margin-right: 150px; 
} 

.nav > ul > li { 
    display: inline-block; 
    list-style: none; 
    padding: 0 20px 0 20px; 
    vertical-align: top; 
    position: relative; 
} 

.nav > ul > li:first-child > a:after { 
    width: 6px; 
    height: 6px; 
    border-bottom: 1px solid #000; 
    border-right: 1px solid #000; 
    position: absolute; 
    margin-top: calc(5vh - 5px); 
    margin-left: 8px; 
    content: ""; 
    transform: rotate(45deg); 
} 

.nav > ul > li > ul { 
    display: none; 
    margin-left: -50%; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 

.nav > ul > li > ul > li { 
    list-style: none; 
    background-color: #FFF; 
    padding: 0 20px 0 20px; 
    position: relative; 
} 

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

.nav ul a { 
    color: #222; 
    text-decoration: none; 
    line-height: 10vh; 
} 

.nav a:hover { 
    color: #999; 
} 

.landing { 
    padding-top: 10vh; 
    height: 50%; 
    width: 100%; 
    background: url('bg.jpg'); 
    background-size: cover; 
    position: relative; 
    text-align: center; 
    color: #FFF; 
    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); 
} 

@media only screen and (max-width: 850px){ 
    .nav .hamburger { 
     height: 6%; 
     display: block; 
     float: left; 
     margin: 2% 0 0 2%; 
     left: 0; 
     top: 0; 
     position: fixed; 
    } 

    .nav .logo { 
     text-align: center; 
     margin: 0; 
     float: none; 
    } 

    .nav > ul { 
     display: none; 
     float: none; 
     width: 100%; 
    } 

    .nav .hamburger:hover ~ ul { 
     display: block; 
     width: 100%; 
     margin: 0; 
    } 

    .nav > ul:hover { 
     display: block; 
     width: 100%; 
    } 

    .nav ul:hover li { 
     width: 100%; 
     padding: 0; 
    } 

    .nav > ul > li { 
     display: block; 
     background-color: #F2F2F2; 
    } 

    .nav > ul > li > ul > li { 
     background-color: #D4D4D4; 
    } 
}

источник

2016-11-14 Sten

Попробуйте добавить это css.

ul > li a, .nav > ul > li > ul > li a { display:block; } Я также укажу, что с тегом носителя, определяющим ширину, как ваш способ обнаружения мобильного. Ваш мобильный сайт будет отображаться и на рабочих столах, когда браузер будет уменьшен ниже 850 пикселей. Это будет проблемой с вашим событием зависания, поскольку он не загорится после того, как мышка покинет гамбургер.

источник

2016-11-14 17:53:23 Thaddeus

, похоже, не работает для меня – Sten

Навигатор, не являющийся статическим для вас, означает, что меню исчезает, когда вы больше не нависаете над кнопкой? – Thaddeus

Это не работает из-за того, что как только вы покидаете изображение, оно теряет состояние зависания. Посмотрите на этот пример из вашего кода:

<li> 
    <li><a href="#">PAGE</a></li> 
    <ul> 
    <li><a href="#">DROPDOWN</a></li> 
    <li><a href="#">DROPDOWN</a></li> 
    </ul> 
</li>

И КСС

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

Ставишь CSS на первом литий, который содержит раздел, а также раздел подменю. Таким образом, неважно, находитесь ли вы над элементом привязки или неупорядоченным списком, они все еще являются частью первого li, поэтому он зависает.

В ситуации с гамбургером вы помещаете накидку css на элемент, который не содержит меню, поэтому, как только вы покидаете изображение гамбургера, оно теряет состояние зависания.

источник

2016-11-14 23:47:54 TomasB

Мобильная навигация не статична

ответ

Смежные вопросы