Pure CSS dropdown triggering on hover of wrong element

Question

So I have a pure css dropdown menu, but I'm having one problem. The dropdown works when you hover over a link, but it's also triggering when you hover over the actual container that contains the dropdown portion. Here's a jsfiddle with the code. http://jsfiddle.net/9BRac/

<div class="nav-con">
  <nav role='navigation' id="nav">
    <ul>
      <li id="linked"><a href="#">Home</a></li>
      <li><a href="#">About</a>
          <ul class="dropdown">
            <li>Link 1.</li>
            <li>Link 2.</li>
            <li>Link 3</li>
          </ul>  
      </li>
      <li><a href="#">Clients</a>
          <ul class="dropdown">
            <li>Link 1.</li>
            <li>Link 2.</li>
            <li>Link 3</li>
          </ul>  
      </li>
      <li><a href="#">Contact Us</a>
          <ul class="dropdown">
            <li>Link 1.</li>
            <li>Link 2.</li>
            <li>Link 3</li>
          </ul>  
      </li>
    </ul>
    </nav>


.clearfix:before,  
.clearfix:after {  
    content: " ";  
    display: table;  
}  
.clearfix:after {  
    clear: both;  
}  
.clearfix {  
    *zoom: 1;  
}  

nav {
  width: 100%;
  height: 60px;
  background-color:black;
  border-bottom: #ffd600 solid 10px; 
  margin: 0 auto;
}

nav ul {
  position:inheirt;
}

nav ul li {
    transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  -webkit-transition: all .6s ease-in-out;
  width: 80px;
  height:60px;
  margin-left:10px;
  display:;
  float: left;
  line-height: 60px;
  text-align:center;
  list-style:none;
  position:inherit;
  color: white;
  text-decoration:none;
}

 nav ul li:hover {
  width: 80px;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  -webkit-transition: all .6s ease-in-out;
  height:60px;
  margin-left:10px;
  background-color:#ffd600;
  float: left;
  line-height: 60px;
  text-align:center;
  list-style:none;
  position:inherit;
  color: white;
  text-decoration:none;
}

nav ul li a {
  color: white;
  text-decoration:none;
}

html {
  background-color: #f2f2f2;
}

#dropdown {
    width:100%;
  height:200px;
  opacity: 0.8;
  background-color:black;
    display:none;
}


.dropdown {
  margin-top:10px;

}
.dropdown li {
  width: 300px;
  background-color: #ffd600;
}

nav ul ul {
    opacity: 0;
  transition: all .6s ease-in-out;
  -moz-transition: all .6s ease-in-out;
  -o-transition: all .6s ease-in-out;
  -webkit-transition: all .6s ease-in
}

nav ul li:hover > ul {
        opacity: 0.8;
    transition: all .6s ease-in-out;
    -moz-transition: all .6s ease-in-out;
    -o-transition: all .6s ease-in-out;
    -webkit-transition: all .6s ease-in-out;
    }

nav ul ul li {
  opacity: 1.0 !important;
}

nav ul ul li:hover {
  width: 350px !important;
}

score 2 · Accepted Answer · edited May 23 '17 at 12:31

Use the following

/* Your dropdown */
nav ul ul {
    opacity: 0;
    visibility:hidden;
    transition: opacity .6s ease-in-out;
    -moz-transition: opacity .6s ease-in-out;
    -o-transition: opacity .6s ease-in-out;
    -webkit-transition: opacity .6s ease-in
}

/* Code to display your dropdown */
nav ul li:hover > ul {
    opacity: 0.8;
    visibility:visible;
}

For a working example go here http://jsfiddle.net/DanielApt/9BRac/12/

Explanation: Your .dropdown still exists, it just has an opacity of 0.

Whenever you hover over this “invisible” .dropdown you trigger the hover styling for its parent li, which leads to showing .dropdown again.

The solution: set a visibility of hidden for your .dropdown, and set the visibility to visible only when you hover over the parent li

Also only use the transition on the opacity property, then visibility is changed immediately, but the opacity transitions smoothly.

PS: If you're curious why I'm not using display:none, it is because you can't transition display (source for the solution using visibiliy

Alessandro Incarnati · Answer 2 · 2014-07-25T23:29:50.343

0

Try using visibility:hidden instead of editing just the opacity on hover like this:

http://jsfiddle.net/9BRac/18/

Now you can edit a bit the transitions timing to make it smoother.

As well the transition property could be used on opacity only and not on all properties.

edited Jul 25 '14 at 23:29

answered Jul 25 '14 at 23:14

Alessandro Incarnati

7,018
3
38
54

Pure CSS dropdown triggering on hover of wrong element

2 Answers2