html - 如何缩小下拉菜单和菜单项之间的差距

Question

我正在尝试仅使用 css 制作下拉菜单。当我将鼠标悬停在汉堡包符号上时，汉堡包符号和菜单项之间会出现间隙。 如何缩小使用专业代码和仅使用 css 的差距？ 不应使用 Flexbox 和 Grid。

我该如何解决这个问题？

下面你可以看到我当前的代码:

/* ############################## START GLOBAL SETTINGS ############################## */

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  font-family: 'Raleway', 'Lato', 'Helvetica Neue', 'Arial', sans-serif;
  font-size: 62.5%;
}

ul {
  margin: 0;
  padding: 0;
}


/* ############################## END GLOBAL SETTINGS ############################## */


/* ############################## START GENERAL SETTINGS ############################## */

.clearfix::after {
  content: "";
  clear: both;
  display: block;
}


/* ############################## END GENERAL SETTINGS ############################## */


/* ############################## START NAVIGATION BAR ############################## */

.header-nav {
  width: 100%;
  height: 5rem;
  background-color: #3d3f45;
  position: relative;
  font-weight: 600;
  font-size: 1.1rem;
}

.header-nav .container,
.header-nav .row,
.header-nav .col-6 {
  height: 100%;
}

.header-nav ul>li>a:link,
.header-nav ul>li>a:visited {
  color: #fff;
  text-decoration: none;
}


/* ############################## END NAVIGATION BAR ############################## */


/* ############################## START MOBILE NAVIGATION BAR ############################## */

.col-6 {
  position: relative;
}

.mobile-nav-button>img {
  width: 30px;
  height: auto;
  border: 1px solid #000;
  position: absolute;
  float: right;
  right: 0;
  transform: translateY(-50%);
  top: 50%;
}

.mobile-nav-content>ul>li {
  display: block;
  background-color: #3d3f45;
  padding: 1rem;
  text-align: center;
}

.mobile-nav-content {
  position: absolute;
  right: 0;
  top: 50px;
  display: none;
}

.mobile-nav-dropdown:hover>.mobile-nav-content {
  display: block;
}


/* ############################## END MOBILE NAVIGATION BAR ############################## */

<nav class="header-nav">
  <div class="container">
    <div class="row">
      <div class="col-6">
        <a href="index.html">
          <img src="#" alt="">
        </a>

        <div class="mobile-nav-dropdown clearfix">
          <div class="mobile-nav-button">
            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b2/Hamburger_icon.svg/2000px-Hamburger_icon.svg.png" alt="Hamburger-Symbol">
          </div>

          <div class="mobile-nav-content clearfix">
            <ul>
              <li><a href="index.html">First</a></li>
              <li><a href="leistungen.html">Second</a></li>
              <li><a href="kontakt.html">Third</a></li>
              <li><a href="impressum.html">Fourth</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

Answer 1

懒惰的答案是告诉你修改 .mobile-nav-content { 使 top 值大约为 40px 而不是当前的 50。不过，这实际上并不能解决您的问题。

看，现在显示下拉菜单的条件是您将鼠标悬停在汉堡菜单上。即使您的下拉菜单被移动到接触汉堡菜单，一旦您将光标从汉堡菜单移到下拉菜单上，您的悬停条件就不再满足。

做这种事情的理想方法是将悬停事件基于触发器(在本例中为您的汉堡菜单)和下拉菜单的共同祖先，这样当悬停在任一部分上时，满足悬停条件。

.menu-bar {
    position: relative;
    width: 100%;
    height: 50px;
    background-color: #c0c0c0;
}

.drop-holder {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
}

.burger-menu {
    margin: 10px 10px 0;
    width: 30px;
    height: 30px;
    background-color: #222;
}

.dropdown {
    display: none;
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 50px 0 0;
    list-style: none;
}

.dropdown li {
    width: 200px;
    background-color: #c0c0c0;
}

.drop-holder:hover .dropdown {
    display: block
}

<div class="menu-bar">
    <div class="drop-holder">
        <div class="burger-menu"></div>
        <ul class="dropdown">
            <li>Link 1</li>
            <li>Link 2</li>
            <li>Link 3</li>
            <li>Link 4</li>
        </ul>
    </div>
</div>