CSS悬停区域不包含到按钮

Question

这是一个HTML/CSS的问题。我在一个较大的导航元素中有一个下拉按钮。我遇到的问题是悬停（滚动）区域是整个导航，不包含在按钮中。我想也许给按钮设置宽度可以做到这一点，但它没有帮助。

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

：隐藏元件id为 “藏起来”，并与ID “探寻” 我使用如下所示.The代码的翻转按钮，由于定义

Answer 1

你应该选择更改为：

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

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

我认为，你还有其他的问题，你不能使用你的领域，所以将其更改为：

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

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