CSS懸停區域不包含到按鈕

這是一個HTML/CSS的問題。我在一個較大的導航元素中有一個下拉按鈕。我遇到的問題是懸停（滾動）區域是整個導航，不包含在按鈕中。我想也許給按鈕設置寬度可以做到這一點，但它沒有幫助。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代碼的翻轉按鈕，由於定義

來源

2013-04-07 Hezerac

你應該選擇更改爲：

#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

來源

2013-04-07 19:09:13 Saram

太好了，謝謝！你爲什麼想在這裏使用一個列表？謝謝！ – Hezerac 2013-04-07 20:29:24

其等級性質：http://phrogz.net/JS/ul2menu/purecss_testsuite.html – Saram 2013-04-07 22:38:52

CSS懸停區域不包含到按鈕

回答

相關問題