当我将鼠标悬停在 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;
}

这基本上可以让您将鼠标悬停在 "me" 按钮上出现下拉按钮，但是当我将光标向下移动到 select 一个他们（编辑：他们的意思是悬停时出现的下拉菜单选项）立即消失。

这似乎在 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 高度只为自身伸展，所以当您将鼠标悬停在光标下方时，您不再指向它。 position: absolute 在您的 .dropdown-content 中不会使其拉伸父内容。不过，还需要一些额外的 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>

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

Dropdown menu closes when I hover the options in Firefox

css

dropdown

pug