Question

我试图仅使用css进行下拉菜单。当我将鼠标悬停在汉堡符号上时，汉堡包符号与菜单项之间存在间隙。如何使用专业代码缩小差距并仅使用css？不应使用Flexbox和Grid。

如何解决此问题？

您可以在下面看到我当前的代码：

＆＃13;

/* ############################## 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 ############################## */

＆＃13;

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

＆＃13;

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>

如何缩小dropdownmenu和menuitem

1 个答案: