Question

这是一个HTML / CSS问题。我在一个更大的导航元素中有一个下拉按钮。我遇到的问题是悬停（翻转）区域是整个导航并且不包含在按钮中。我想也许给按钮一个设定的宽度可能会这样做，但它没有帮助。隐藏元素使用id“hider”和带有id“seeker”的翻转按钮定义。我正在使用的代码如下所示，谢谢：

HTML

<nav role="navigation">
    <a href="/"><span class="home-icon"></span></a>
    <a href="/about">About</a>
    <a href="#" id="seeker">Dropdown</a>
      <select id="hider">
        <option value="/link">Sample</option>
        <option></option>
        <option></option>
      </select>
    <a href="/updates">Updates</a>
    <a href="/forum">Forum</a>
    <a href="/contact">Contact</a>
  </nav>

CSS

nav a:link,
nav a:visited,  
nav a:active {
  float: left;
  display: block;
  color: white; 
  text-decoration: none;
  padding: 8px 10px;
 }
[role="navigation"] {
  box-sizing: border-box;
  background: black;
  border-top: 1px solid red;
  border-bottom: 1px solid #333;
  font-size: 14px;
  font-weight: bold;
  width: 100%;
  height: 30px;
  position: fixed;
  top: 0;
  z-index: 999;
}

#hider {
  box-sizing: border-box;
  display: none;
  position: absolute;
  top: 0;
  margin-top: 20px;
  padding-top: 100px;
  height: 350px;
  width: 300px;
  background: white;
  border: 1px solid black;
  z-index: 5;
}

#seeker:focus, nav:hover > #hider {
  display:block;
  background: white;
}

Answer 1

您应该将选择器更改为：

#seeker:hover + #hider {
  display:block;
  background: white;
}

http://jsbin.com/uvisaq/1/edit

我认为，您还有其他问题，即您无法使用您的区域，因此请将其更改为：

#seeker:hover + #hider,#hider:hover

IMO这不是你应该做的。更好的是使用＆lt; UL＆gt;和＆lt; LI＆gt;标签...但是，它取决于你。 CSS可以完成这项工作。 http://jsbin.com/uvisaq/2/edit

CSS Hover区域未包含在按钮中

1 个答案: