When I hover over the drop down menus on my Navbar, they display perfectly. However, it's impossible to click on the items in the menu because as soon as I move the cursor away from the main nav, it disappears. I've tried adding display:block and z-index properties, but the problem persists.
CSS
#ime-nav {
position: fixed;
width: 100%;
z-index: 10000;
background:#FF9900;
}
#ime-nav ul {
list-style-type:none;
margin:0;
padding:0;
position: fixed;
}
#ime-nav li {
display:inline-block;
float: left;
margin-right: 0px;
alignment-adjust:central;
}
#ime-nav li a {
display:block;
min-width:195px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'PT Sans Narrow', Arial, sans-serif;
color: #fff;
background: #2f3036;
text-decoration: none;
}
#ime-nav li:hover a {
background: #F7931E;
}
#ime-nav li:hover ul a {
background: #f3f3f3;
color: #2f3036;
height: 50px;
line-height: 40px;
}
#ime-nav li:hover ul a:hover {
background: #333333;
color: #fff;
}
#ime-nav li ul {
display: none;
}
#ime-nav li ul li {
display: block;
float: none;
}
#ime-nav li ul li a {
width: auto;
min-width: 100px;
padding: 0 20px;
}
#ime-nav ul li a:hover + .hidden, .hidden:hover {
display: block;
/*this is where I'm trying to fix the problem*/
}
.show-menu {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
text-decoration: none;
color: #fff;
background: #333;
text-align: center;
padding: 10px 0;
display: none;
}
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ #menu{
display: block;
}
@media screen and (max-width : 760px){
#ime-nav ul {
position: static;
display: none;
}
#ime-nav li {
margin-bottom: 1px;
}
#ime-nav ul li, li a {
width: 100%;
}
#ime-nav .show-menu {
display:block;
}
}
HTML
<div id="ime-nav">
<label for="show-menu" class="show-menu"><img src="navigate.png" /></label>
<input type="checkbox" id="show-menu" role="button">
<ul id="menu">
<li>
<a href="#"><img src="icon_nav.png" /></a>
<ul class="hidden">
<li><a href="#"><img src="nav_libraryicon.png" /></a></li>
</ul>
</li>
<li>
<a href="#">Home ￬</a>
<ul class="hidden">
<li><a href="#">News and Articles</a></li>
<li><a href="#">Photo Gallery</a></li>
</ul>
</li>
<li>
<a href="#">Library ￬</a>
<ul class="hidden">
<li><a href="#">Thermal Power Library</a></li>
<li><a href="#">Mechatronics Library</a></li>
<li><a href="#">Freshman Library</a></li>
<li><a href="#">Main Library</a></li>
</ul>
</li>
<li>
<a href="#">Learn ￬</a>
<ul class="hidden">
<li><a href="#">Pro Engineer/ Creo</a></li>
<li><a href="#">Autocad</a></li>
<li><a href="#">Matlab </a></li>
<li><a href="#">Microsoft Excel</a></li>
<li><a href="#">Lab Episodes</a></li>
</ul>
</li>
<li><a href="#">Virtual Registration</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
</ul>
</div>
</div>