Question

我正在尝试使用子菜单实现汉堡包菜单。到目前为止看起来很丑陋，特别是关于最后一项。显然，我在将鼠标悬停在 Dropdown1 上时遇到了问题。看起来悬停在 Dropdown1 项目上是不正确的，汉堡包背景覆盖也不正确。

function myFunction() {
  var x = document.getElementById("myTopnav");

  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}

.topnav {
  background-color: #333;
  overflow: visible;
}
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.menuitems a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}
.topnav a:hover {
  background-color: #ddd;
  color: black;
}
.menuitems li a:hover {
  background-color: #ddd;
  color: black;
}
.topnav a.active {
  background-color: #808080;
  color: white;
}
.topnav .icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }
}
@media screen and (max-width: 600px) {
    .topnav li:first-child > a {
    display: none;
  }
}
@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive  li > a {
    float: none;
    display: block;
    text-align: left;
  }
}

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
      <ul>
        <li>
          <a href="#Dropdown">Dropdown</a>
          <ul class="menuitems">
            <li>
              <a href="#Dropdown1">Dropdown1</a>
            </li>
          </ul>
        </li>
      </ul>
    <a href="javascript:void(0);" class="icon" onclick="myFunction()">
  </a>
</div>

Answer 1

背景问题似乎是因为您的浮动未在 <div class="owl-carousel quote-carousel"> <div class="quote-item" style="background-image: url('/images/landing/profile.png')"> <div class="quote-text">"Where are navigation controls??"</div> <div class="quote-name">John Doe, Hampshire</div> </div> </div> <script> $(document).ready(function () { $(".owl-carousel").owlCarousel({ items: 1, loop: true, auto: true, nav: true, navText: ["<div>LEEEEFT</div>", "<div>RIIIIGHT</div>"] }); }); </script> 上清除。我创建了一个工作示例供您比较您的代码，并稍微调整了您的代码。

我将浮动切换到 .topnav a，并调整了下拉导航。有时浮动更难跟踪所以 display: flex 可以简化一点。我没有做的一件事是在移动设备上设置悬停。显然，您无法将鼠标悬停在移动设备上，因此需要使用点击事件来调整 display: flex 以触发显示/隐藏。

.menuitems

function myFunction() {
    var x = document.getElementById("myTopnav");
        if (x.className === "topnav") {
            x.className += " responsive";
        } else {
            x.className = "topnav";
    }
}

.topnav {
    background-color: #333;
    overflow: visible;
}
.topnav a {
    padding: 14px 16px;
    text-decoration: none;
    color: #fff;
}
.topnav ul {
    margin: 0;
    padding: 0;
    display: flex;
}
.topnav li {
    vertical-align: top;
    list-style-type: none;
    font-size: 17px;
    position: relative;
    width: auto;
}
.topnav li > a {
    text-align: center;
    color: #f2f2f2;
    text-decoration: none;
    font-size: 17px;
    display: block;
}
.topnav li > a:hover {
    background-color: #ddd;
    color: black;
}
.topnav li ul {
    display: none;
    position: absolute;
    background-color: #333;
}
.topnav li:hover > ul {
    display: block;
}
.topnav li.menuitems li a:hover {
    background-color: #ddd;
    color: black;
}
.topnav a.active {
    background-color: #808080;
    color: white;
}
.topnav .icon {
    display: none;
}

@media screen and (max-width: 600px) {
    .topnav ul {
        flex-direction: column;
        text-align: right;
    }
    .topnav li {
        display: none;
    }
    .topnav .icon {
        display: block;
        text-align: right;
    }
    .topnav.responsive li {
        display: block;
    }
    .topnav.responsive > li > ul > li {
        display: block;
    }
    .topnav.responsive li > a {
        text-align: right;
    }
    .topnav.responsive li ul {
        width: 100%;
        right: 0;
        text-align: right;
    }
}

带 submentu 的汉堡菜单

1 个答案: