css - 如何增加 CSS 中的悬停空间

Question

我试图在导航按钮(文本)和下拉菜单之间保留一些空间，这样它看起来不错并且位于黑色导航栏下方。无法使用我在两个元素之间添加(和想要)的额外空间将鼠标悬停在下拉菜单上。

这是最终结果:https://csswizardry.com/demos/maximising-hit-area/不确定如何到达那里...

HTML

  <div class="dropdown">
  <button class="dropbtn">Services&nbsp; <i class="down"></i></button>
    <div class="dropdown-content">
        <div class="column_test">
            <a href="#">Item 1</a>
            <a href="#">Item 2</a>
            <a href="#">Item 3</a>
        </div>
        <div class="column_test">
            <a href="#">Item 4</a>
            <a href="#">Item 5</a>
            <a href="#">Item 6</a>
        </div>
    </div>
  </div>

CSS

/* The dropdown container */
.dropdown {
  float: right;
  overflow: hidden;
  padding-top: 37px;
  margin-right: 10px;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 12px; 
  font-weight:300;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: none;
  outline: none;
  color: #FFFFFF; /* Nav text color */
  background-color: inherit;
}

.dropdown .dropbtn:hover {
  color: blue;
}

/* Dropdown content - 6 item box (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width:400px;
  top:70px;
  padding-bottom:7px;
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #000000;
  float: none;
  padding: 12px 16px;
  display: block;
  text-align: left;
}

Answer 1

我设法通过将 height:65px 添加到 .dropdown.dropbtn 来增加悬停空间来自己解决这个问题。希望这对其他人有帮助。