Having a CSS dropdown menu works great, except for one pesky problem. The dropdown triggers when hovering over the container itself, rather than just the link. Check out this 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;
}