I'm experiencing some difficulties with displaying a dropdown menu.
Check out the fiddler link for reference: http://jsfiddle.net/GxrSk/
Below is the simplified HTML code:
<nav>
<ul id="top-menu">
<li class="parent">
<a href="#">MENU ITEM</a>
<ul class="sub-menu">
<li><a href="#">ITEM 1</a></li>
<li><a href="#">ITEM 2</a></li>
</ul>
</li>
</ul>
</nav>
The accompanying CSS snippet:
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
nav { margin-top: 28px; }
#top-menu li { position: relative; }
#top-menu > li { display: inline-block; margin-left: 40px; }
#top-menu li a { font-family: "Ubuntu Condensed", sans-serif; color: #000; font-size: 16px; text-transform: uppercase; }
ul.sub-menu { display: none; top: 26px; position: absolute; min-width: 137px; z-index: 9999; }
ul.sub-menu > li > a { text-align: center; display: block; }
#top-menu li:hover > ul.sub-menu { display: block; }
The issue I'm encountering is that sometimes the menu functions properly, while other times it seems to disappear when trying to access it.
If my explanation is unclear, feel free to ask questions in the comments below.