CSS 悬停区域不包含在按钮中

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 这不是你应该做的。更好的是使用

和
• 标签......但是，这取决于你。 CSS 可以完成这项工作。 http://jsbin.com/uvisaq/2/edit