How to control what to show / hide
Hello,
I made a navigation where i need to show a sub navigation when i hover a top navigation link. My problem is that i want it to hide again when im not either on the button(.news-btn) or the div i wrapped my sub in (.news-btn-sub-wrap)
Lets take i have navigation liket his
top navigation
<ul class="navigation">
<li class="news-btn">News</li>
<li class="about-btn">About</li>
</ul>
Sub navigation
<ul class="news-btn-sub-wrap">
<li>Sub link 1</li>
<li>Sub link 2</li>
</ul>
i want, if i have my mouse in the top navigation and move it to another button not to keep show the sub menu. This is ok if i have a button next to it with another sub menu, but i the button dont have sub menu, this is a problem.
the .js file
$(document).ready(
function(){
$(".news-btn").mouseover(function () {
$(".news-btn-sub-wrap").show();
});
$(".news-btn-sub-wrap").mouseleave(function() {
$(".news-btn-sub-wrap").hide();
});
});
hope someone can help.
cheers