移动导航不是静态的

我做了一个移动媒体查询的导航栏，但是当我尝试将鼠标悬停在汉堡菜单上时，导航栏不是静态的，我不能点击任何链接。移动导航不是静态的

谁能帮我解决这个问题，我已经在努力了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>

而CSS

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

你把CSS上含有部分以及子部分的第一个里。这种方式不管你是否在锚元素或无序列表上，它们仍然是第一个元素的一部分，因此它被徘徊。

在汉堡的情况下，你把悬停CSS放在一个不包含菜单的元素上，所以一旦你离开汉堡包图像，它就会失去它的悬停状态。

来源

2016-11-14 23:47:54 TomasB

移动导航不是静态的

回答

相关问题