When my mouse pointer moves out of the red color box, it still triggers the hover function. However, I only want the hover effect to work within the red color box and hide the menu when it's outside the box.
This is the source code from JSfiddle: http://jsfiddle.net/KECN7/
Here is my HTML source code:
<ul id="menu">
<li>
<a href="#" class="btn-function"></a>
<ul>
<li><a href="' . wp_logout_url(home_url()) . '">Logout</a></li>
<li><a href="#">Account Settings</a></li>
<li><a href="#">Terms & Policies</a></li>
</ul>
</li>
</ul>This is the CSS source code:
#menu {
margin: 0;
padding: 10px 0 0 0;
list-style: none;
position: absolute;
}
#menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a {
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
...