0

这是一个 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;
}
4

1 回答 1

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

于 2013-04-07T19:09:13.283 回答