CODEWITHSUNDEEP
csshover
Hezerac
Hezerac

Reputation: 334

CSS Hover area not contained to button

This is an HTML/CSS question. I have a drop-down button within a larger navigation element. The problem I am having is the hover (rollover) area is the entire nav and not contained to the button. I thought maybe giving the button a set width might do it but it didnt help. The hidden element is defined with the id "hider" and the rollover button with the id "seeker".The code I am using shown below, thanks:

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

Upvotes: 0

Views: 158

Answers (1)

Saram
Saram

Reputation: 1510

You should change selector to:

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

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

I think, that you have other problem, that you can not use your area, so change it to:

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

IMO this is not way you should do is. Better is use <UL> and <LI> tags... but, its up to you. CSS can do the job. http://jsbin.com/uvisaq/2/edit

Upvotes: 1

Related Questions