Question

我有一个下拉菜单按钮，将鼠标悬停时会变成灰色。但是，灰色不会扩展到整个按钮，而是停留在我设置填充的位置。

HTML：

#dropdown {
  list-style: none;
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 10px;
  z-index: 99999;
  width: 230%;
}

#dropdown li:hover,
#dropdown li:active {
  background-color: #e3e3e3;
}

#dropdown.active, #menu:target #dropdown {
  display: block;
}

<ul class="main-nav js--main-nav">
  <li id="menu">
    <a href="#menu">Help&#x25BE;</a>
    <ul id="dropdown">
      <li><a href="#">Give</a></li>
      <li><a href="#">Get Help</a></li>
      <li><a href="#">Get Involved</a></li>
    </ul>
  </li>
</ul>

我想要的是，灰色鼠标悬停在上方时会占据所有下拉菜单，而不是仅仅停留在填充上。

编辑：我应该澄清一下，当我想让它占据下拉菜单的“全部”时，我的意思是当我将其悬停在那上面时。

Answer 1

这是您要找的吗？

keys = ['bob', 'alice']
values = [40, 20]

d = {}

for i in range(len(keys)):
    d[keys[i]] = values[i]

#dropdown {
  list-style: none;
  display: none;
  position: absolute;
  background-color: #fff;
  padding: 10px;
  z-index: 99999;
  width: 230%;
}

#dropdown:hover {
  background-color: #eee;    
}

#dropdown li:hover,
#dropdown li:active {
  background-color: #e3e3e3;
}

#dropdown.active, #menu:target #dropdown {
  display: block;
}

背景颜色不会占据整个元素

1 个答案: