html - 当鼠标光标离开导航父项时子菜单消失

Question

当我将光标放在导航项上时，子菜单出现，然后当我移动鼠标单击子菜单中的内容时，子菜单消失。

我在 stackoverflow 上读到一些类似的问题，比如更改 z-index，对我不起作用

* {
  font-family: arial, sans-serif;
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(255, 255, 255, .8);
  border-radius: 0px;
  border: none;
  width: 100%;
  margin: 0;
  padding: 25px 0;
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}

.item {
  color: black;
  font-weight: bold;
  text-transform: uppercase;
}

.submenu {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  align-text: center;
  position: absolute;
  top: 107px;
  padding: 10px;
  left: 0;
  right: 0;
  text-transform: uppercase;
  z-index: 1;
  background-color: #2F4F4F;
  color: white;
  justify-content: space-evenly;
}

.submenu li {
  margin-left: 6%;
  width: 19%;
  padding: 5px;
}

.item.has-children:hover .submenu {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-evenly;
  padding: 10;
  flex-wrap: wrap;
  flex: 1 1 calc(25% - 80px);
  color: black;
  background-color: rgba(255, 255, 255, .8);
}

ul {
  list-style: none;
  padding: 0;
}

<nav>
  <ul class="nav">
    <li class="item">
      <a href="../index.html">
        <img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" />
      </a>
    </li>
    <li class="item has-children" style="color:#4D4D4D;">Printing
      <ul class="submenu">
        <li>Labels & Stickers</li>
        <li>Banners</li>
        <li>A-Frame</li>
        <li>Menu Boards</li>
        <li>Takeout Menus</li>
        <li>Business Cards</li>
        <li>Dine-In Menus</li>
        <li>Posters</li>
        <li>Envelopes</li>
        <li>Chinese Wedding Cards</li>
        <li>Flyers</li>
        <li>Letterheads</li>
        <li>Brochures</li>
        <li>Vinyl</li>
        <li>NCR Forms</li>
        <li>Catalogues</li>
      </ul>
    </li>
    <li class="item has-children">Graphic Design
      <ul class="submenu">
        <li>Logo Design</li>
        <li>Ads/Flyers/Promotions</li>
        <li style="text-align: center;">Menu Boards<br> (Digital & Boards)</li>
        <li style="text-align: center;">Restaurant Menus<br> (Takeout & Dine-In)</li>
      </ul>
    </li>
    <li class="item has-children">Chinese Calendars
      <ul class="submenu">
        <li>Cane Wallscroll Calendars</li>
        <li>Wall Calendars</li>
        <li>Mini Calendars</li>
        <li>Desk Calendars</li>
        <li>Special Desk Calendars</li>
        <li>Red Packet Calendars</li>
        <li>More Calendars</li>
        <li></li>
      </ul>
    </li>
    <li class="item">FAQS</li>
    <li class="item">Contact Us</li>
  </ul>
</nav>

当我将光标放在导航元素上时，它应该一直显示子菜单，直到我移动导航 flex 元素的光标

Answer 1

问题是您的 .submenu 类中有一个 top 值。这会产生一个间隙，您在技术上不会“悬停”在菜单或子菜单上。解决此问题的最佳方法是使用 padding 而不是 top 将子菜单下推，同时从技术上讲它仍能覆盖空白区域。

例子:

* {
        font-family: arial, sans-serif; 
        box-sizing: border-box;}

    html, body {
        margin: 0;
        padding: 0;
    }

    .nav {
        background-color: #ccc;
        position:fixed; 
        top:0; 
        left:0;
        /*background-color: rgba(255,255,255,.8);*/
        border-radius: 0px;
        border: none;
        width: 100%;
        margin: 0;
        /*padding: 25px 0;*/
        flex-direction: row;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
    }

    .item {
        color: black;
        font-weight: bold;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        height: 100%;
    }

    .submenu {
        display: none;
        flex-wrap: wrap;
        align-items: center;
        align-text: center;
        position: absolute;
        top: 100%;
        padding: 10px;
        left: 0;
        right: 0;
        text-transform: uppercase;
        z-index: 1;
        background-color: #2F4F4F;
        color: white;
        justify-content: space-evenly;
    }

    .submenu li {
        margin-left: 6%;
        width: 19%;
        padding: 5px;

    }

    .item.has-children:hover .submenu {
        display: flex;
        align-items: center;
        flex-direction: row;
        justify-content: space-evenly;
        padding: 10;
        flex-wrap: wrap;
        flex: 1 1 calc(25% - 80px);
        color: black;
        background-color: rgba(255,255,255,.8);
    }

ul {
        list-style: none;
        padding: 0;
        height: 100px;
    }

<nav>
    <ul class="nav">
        <li class="item">
            <a href="../index.html">
                <img src="../Images/Navigation/Intak Logo 25px High.png" alt="Home" />
            </a>
        </li>
        <li class="item has-children" style="color:#4D4D4D;">Printing
            <ul class="submenu">
                <li>Labels & Stickers</li>
                <li>Banners</li>
                <li>A-Frame</li>
                <li>Menu Boards</li>
                <li>Takeout Menus</li>
                <li>Business Cards</li>
                <li>Dine-In Menus</li>
                <li>Posters</li>
                <li>Envelopes</li>
                <li>Chinese Wedding Cards</li>
                <li>Flyers</li>
                <li>Letterheads</li>
                <li>Brochures</li>
                <li>Vinyl</li>
                <li>NCR Forms</li>
                <li>Catalogues</li>
            </ul>
        </li>
        <li class="item has-children">Graphic Design
            <ul class="submenu">
                <li>Logo Design</li>
                <li>Ads/Flyers/Promotions</li>
                <li style="text-align: center;">Menu Boards<br>
                    (Digital & Boards)</li>
                <li style="text-align: center;">Restaurant Menus<br>
                    (Takeout & Dine-In)</li>
            </ul>
        </li>
        <li class="item has-children">Chinese Calendars
            <ul class="submenu">
                <li>Cane Wallscroll Calendars</li>
                <li>Wall Calendars</li>
                <li>Mini Calendars</li>
                <li>Desk Calendars</li>
                <li>Special Desk Calendars</li>
                <li>Red Packet Calendars</li>
                <li>More Calendars</li>
                <li></li>
            </ul>
        </li>
        <li class="item">FAQS</li>
        <li class="item">Contact Us</li>
    </ul>
</nav>