Having trouble with creating a dropdown navigation bar? I've encountered an issue where the dropdown menu disappears as soon as I move my cursor off the buttons that reveal it. The menu itself displays properly, but accessing the drop down menu is proving to be problematic.
http://codepen.io/anon/pen/bNGqvp
CSS:
#navigation li {
display: inline;
}
/*navigation text*/
.nav a
{
display: inline-block;
padding: 0 20px;
background:#383838;
border-radius: 2em;
border: 1px solid #272727;
color:#C4B09C;
text-decoration:none;
font: bold 12px Arial;
line-height: 27px;
margin-right:1 px;
position: relative;
left: 250px;
top: 7px;
}
/*naviagation menu*/
.nav {
background: #333;
background: -moz-linear-gradient(#383838, #272727);
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#383838), to(#272727));
background: -webkit-linear-gradient(#383838, #272727);
border-bottom: 1px solid #222;
}
/*menu hover*/
.nav li >ul {display : none;}
.nav li:hover > ul {
display: block;
position: absolute;
padding-top: 20px;
margin-left: 20%;
}
HTML:
<div class="nav">
<ul id="navigation">
<li><a href="../index.html">Home</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="#">Media</a>
<ul>
<li><a href="audio.html">Audio</a></li>
<li><a href="video.html">Video</a></li>
</ul>
</li>
<li><a href="#">About Me</a>
<ul>
<li><a href="faq.html">FAQ</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</li>
<li><a href="honesty.html">Honesty</a></li>
</ul>
</div>