css - 当我将鼠标悬停在 Firefox 中的选项时，下拉菜单关闭

Question

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

这是 Jade :

    .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 中起作用。

编辑:原来我需要把 jade 改成下面的样子(感谢 Kai Hao 的帮助):

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

Answer 1

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

尝试将下拉菜单的 position: absolute 更改为 relative。也许它不会工作，因为 .dropbtn 的高度只会为它自己拉伸(stretch)，所以当你将鼠标悬停在光标下方时，你不再指向它了。您的 .dropdown-content 中的 position: absolute 不会使其拉伸(stretch)父内容。不过，需要进行一些额外的 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>