Pure CSS dropdown triggering on hover of wrong element

Problem

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;
}
Problem courtesy of: Isaac Sturkey

Solution

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

Solution courtesy of: Daniel Apt

Discussion

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.

Discussion courtesy of: Alessandro Incarnati

This recipe can be found in it's original form on Stack Over Flow.