Question

我使用Jade和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;
}

这是css：

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

这基本上使得当你将鼠标悬停在＆＃34; me＆＃34;按键下拉按钮出现，但当我向下移动光标选择一个它们（编辑：它们意味着悬停时出现的下拉菜单选项）会立即消失。

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

编辑：结果我需要将玉改为以下（感谢Kai Hao的帮助）：

npm install grunt-contrib-jshint --save-dev

Answer 1

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

尝试将下拉菜单中的position: absolute更改为relative。也许它不会起作用，因为.dropbtn高度只能伸展自身，所以当你将光标悬停在光标上时，你不再指向它了。 position: absolute .dropdown-content中的.dropdown-content{ display: none; position: relative; /* here */ }无法延长父级内容。但是需要一些额外的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: relative;
}

.dropbtn:hover .dropdown-content{
  display: block;
}

＆＃13;

<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>

＆＃13;

List = [(1.0, 1.0), (3.0, 3.0), (5.0, 5.0)]

newList = [(1.0, 1.0), (4.0, 4.0), (9.0, 9.0)]

＆＃13;

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

1 个答案: