当我将鼠标悬停在 Firefox 中时，下拉菜单关闭

Question

我使用 Jade 和 CSS 作为下拉菜单

这是玉：

    .dropdown
        button.dropbtn(type="button") Me
          .dropdown-content
            a(href="/favorites") 
              | Favorites
            a(href="/update") 
              | Edit
            a(href="/logout")
              | Logout

这里是css：

.dropdown{
  position: relative;
    display: inline-block;
}
.dropdown-content a{
  display: block;
  padding: 8px 0px;
  text-align: justify;
  color: grey;
  text-decoration: none;
}
.dropbtn {
    background: none;
    color: grey;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropbtn:hover {
  transition: all .2s ease-in-out;
    background: none;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown-content{
  display: none;
  position: absolute;
}

.dropbtn:hover .dropdown-content{
  display: block;
}

这基本上使得当您将鼠标悬停在“我”按钮上时 出现下拉按钮，但是当我向下移动光标以选择一个时 它们（编辑：它们表示悬停时出现的下拉菜单选项）立即消失。

似乎这在 Firefox 中不起作用，但在 Chrome 中起作用。

编辑： 原来我需要把玉改成以下（感谢凯昊的帮助）：

      .dropdown
        .dropbtn
          | Me
          .dropdown-content
            a(href='/favorites')
              | Favorites
            a(href='/update')
              | Edit
            a(href='/logout') 
              | Logout

Answer 1

他们是什么意思？在我的电脑上它确实有效。

尝试将下拉菜单的position: absolute 更改为relative。也许它不会起作用，因为.dropbtn 高度只会自己拉伸，所以当您将光标悬停时，您不再指向它。 .dropdown-content 中的 position: absolute 不会使其拉伸父内容。不过需要进行一些额外的 CSS 调整。

.dropdown-content{
    display: none;
    position: relative; /* here */
}

---

.dropdown{
  position: relative;
    display: inline-block;
}
.dropdown-content a{
  display: block;
  padding: 8px 0px;
  text-align: justify;
  color: grey;
  text-decoration: none;
}
.dropbtn {
    background: none;
    color: grey;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropbtn:hover {
  transition: all .2s ease-in-out;
    background: none;
    color: white;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.dropdown-content{
  display: none;
  position: relative;
}

.dropbtn:hover .dropdown-content{
  display: block;
}

<div class="dropdown">
  <div class="dropbtn">Me
    <div class="dropdown-content"><a href="/favorites">
         
        Favorites</a><a href="/update">
         
        Edit</a><a href="/logout">Logout</a></div>
  </div>
</div>