Question

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

任何人都可以帮我解决这个问题，我已经尝试了90分钟：/

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

Answer 1

尝试将此添加到css。

ul > li a, .nav > ul > li > ul > li a { display:block; } 我还要指出，使用媒体标签检测宽度作为检测移动设备的方式。当浏览器缩小到850px以下时，您的移动网站也将显示在桌面上。这将是您的悬停事件的问题，因为它不会在鼠标离开汉堡包后触发。

Answer 2

它不起作用，因为只要你离开图像就会失去它的悬停状态。从您的代码中查看此示例：

<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放在包含该部分的第一个li以及子部分。这样，无论你是在锚元素还是无序列表上都没关系，它们仍然是第一个li的一部分，所以它是悬停的。

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

移动导航不是静态的

2 个答案: