Question

我一直在为这个下拉菜单苦苦挣扎，当我将鼠标悬停在下拉菜单显示的 .dropdownbtn 上但无法点击它时，它会随着我移动光标而消失。我正在尝试使用 display:block 和 visibility:hidden 和 visibility:visible 方法。谁能帮我处理这行代码？

谢谢！

<!--Navbar : Logo + Menu-->
<nav>
  <img src="img.png" alt="logo" id="logo">
  <ul class="navbar">
    <li><a href="#">About</a></li>
    <li class="dropdownbtn"><a href="#">Projects</a>
      <ul class="dropdown">
          <li><a href="#">Project1</a></li>
          <li><a href="#">Project2</a></li>
      </ul></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

/* NAVBAR */
nav {
  margin: 2vh 2%;
}

img#logo {
  height: 7vh;
}

ul {
  float: right;
  list-style-type: none;
  margin: 2.5vh 0;
}

ul li {
  float: left;
  display: inline-block;
  padding-left: 50px;
}

nav a {
  text-decoration: none;
  color: var(--textgray);
  font-size: 0.95em;
}

nav a:hover {
  text-decoration: none;
  color: #000;
}

ul.dropdown {
    visibility: hidden;
    position: absolute;
    background-color: white;
    width: 80px;
    z-index: 1;
    margin-top: 12px;
    line-height: 0.6;
}

.dropdown > li {
    padding-left: 12px;
    margin: 12px auto;
}

.dropdown > li a:hover {
    background-color: black;
    display: block;
}

.dropdownbtn:hover .dropdown {
   visibility: visible;
   display: block;
}

Answer 1

主要原因是您在 margin-top 上的 ul.dropdown - 它在主菜单和下拉菜单之间创建了一个间隙，当光标从主菜单向下穿过该间隙时，悬停当光标尚未位于下拉菜单上方时，效果将变为非活动状态。

因此添加 margin-top: 0px;，使用 padding-top: 8px;（或您喜欢的其他值）重新创建距离，也可以添加 padding-left: 0; 以不让它向右移动那么远：

nav {
  margin: 2vh 2%;
}

img#logo {
  height: 7vh;
}

ul {
  float: right;
  list-style-type: none;
  margin: 2.5vh 0;
}

ul li {
  float: left;
  display: inline-block;
  padding-left: 50px;
}

nav a {
  text-decoration: none;
  color: var(--textgray);
  font-size: 0.95em;
}

nav a:hover {
  text-decoration: none;
  color: #000;
}

ul.dropdown {
  visibility: hidden;
  position: absolute;
  background-color: white;
  width: 80px;
  z-index: 1;
  line-height: 0.6;
  margin-top: 0px;
  padding-top: 8px;
  padding-left: 0;

}

.dropdown>li {
  padding-left: 12px;
  margin: 12px auto;
}

.dropdown>li a:hover {
  background-color: black;
  display: block;
}

.dropdownbtn:hover .dropdown {
  visibility: visible;
  display: block;
}

<nav>
  <img src="img.png" alt="logo" id="logo">
  <ul class="navbar">
    <li><a href="#">About</a></li>
    <li class="dropdownbtn"><a href="#">Projects</a>
      <ul class="dropdown">
        <li><a href="#">Project1</a></li>
        <li><a href="#">Project2</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 2

我认为基本上下拉li标签离得很远，当你离开父li标签时，鼠标失去鼠标悬停，你应该删除边距并在填充上工作以增加鼠标悬停区域直到它接触，这样指针不会失去连续性，我会像我一样放置你，但它可以改进

img#logo {
  height: 7vh;
}

ul {
  float: right;
  list-style-type: none;
  margin: 2.5vh 0;
}
    
ul.navbar {
    padding-right: 30px;    
}

ul li {
    float: left;
    display: inline-block;
    padding-left: 50px;
    list-style-type: none;
}

nav a {
  text-decoration: none;
  color: var(--textgray);
  font-size: 0.95em;
}

nav a:hover {
  text-decoration: none;
  color: #000;
}

ul.dropdown {
    visibility: hidden;
    position: absolute;
    background-color: white;
    width: 80px;
    z-index: 1;
    margin-top: 0;
    padding: 0;
}

.dropdown > li {
    padding-left: 12px;
    margin: 12px auto;
}

.dropdown > li a:hover {
    background-color: black;
    display: block;
}

.dropdownbtn:hover .dropdown {
   visibility: visible;
   display: block;
}
    **/*NAVBAR*/**
nav {
  margin: 2vh 2%;
    }

Answer 3

它消失的原因是因为你在悬停框的顶部有一个边距。当您悬停边距区域时，它不再认为您悬停在元素上。最简单的解决方法是移除 .dropdown 元素顶部的边距，或者添加一个不可见的框来弥合元素之间的差距，使其认为它仍然悬停在列表项上。

/* NAVBAR */
nav {
  margin: 2vh 2%;
}

img#logo {
  height: 7vh;
}

ul {
  float: right;
  list-style-type: none;
  margin: 2.5vh 0;
}

ul li {
  float: left;
  display: inline-block;
  margin-left: 50px; /*updated*/
}

nav a {
  text-decoration: none;
  color: var(--textgray);
  font-size: 0.95em;
}

nav a:hover {
  text-decoration: none;
  color: #000;
}

ul.dropdown {
    visibility: hidden;
    position: absolute;
    background-color: white;
    width: 80px;
    z-index: 1;
    margin-top: 12px;
    line-height: 0.6;
    transition: all 500ms ease;/*added*/
    opacity: 0;/*added*/
}

.dropdown > li {
    padding-left: 12px;
    margin: 12px auto;
}

.dropdown > li a:hover {
    background-color: black;
    display: block;
}
.dropdownbtn{/*added*/
  position: relative;
}
.dropdownbtn:hover::after{/*added*/
  content:'';
  display:block;
  position: absolute;
  height: 100%;
  width: 100%;
  left:0;
  right:0;
  bottom:-12px;
  z-index: 1;
}
.dropdownbtn:hover .dropdown {
   visibility: visible;
   opacity: 1;/*added*/
   display: block;
}

你可以看到它在这里工作。 https://jsfiddle.net/tmcmanus4th/shfm3zyk/

Answer 4

你在这里有其他答案，但我创造了一些不同的东西。看一看它，试着理解我做了什么。这是小提琴：https://jsfiddle.net/Kretiss/8mzk4jhp/2/。

HTML

<nav>
  <img src="img.png" alt="logo" id="logo">
  <ul class="navbar">
    <li><a href="#">About</a></li>
    <li class="dropdownbtn"><a href="#">Projects</a>
      <ul class="dropdown">
          <li><a href="#">Project1</a></li>
          <li><a href="#">Project2</a></li>
      </ul></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS

body{
  margin: 0;
}

/* NAVBAR */
nav {
  padding: 0 2%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #EEE;
}

img#logo {
  height: 45px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

nav a {
  text-decoration: none;
  color: black;
  line-height: 50px;
  padding: 0 8px;
  display: block;
  margin: 0 10px;
}

nav a:hover {
  color: green;
}

.dropdown {
    background-color: #EEE;
    z-index: 1;
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
}

.dropdown a{
  line-height: 40px;
}

.dropdownbtn{
  position: relative;
}

.dropdownbtn:hover .dropdown {
   display: block;
}

从我个人的角度来看，今天，我认为使用 flex-box 比使用浮动要好得多。此代码可以让您对如何执行此操作的看法略有不同。

我明天会告诉你，现在，如果你愿意，你可以看看这个：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

鼠标悬停时下拉菜单消失

4 个答案: