Although the submenu displays correctly, it refuses to hide when using the mouseleave function. Oddly enough, a console.log() confirms that an event does trigger at the right moment when the mouse exits the <ul>, yet the submenu remains visible for some unknown reason. Strangely, I am able to modify other styles, such as changing the background color of the <ul> to red. Quite perplexing...
$(document).ready(function() {
$(".topLine").hover(function() {
$(".subTopNav").hide(); //hide all potentially open submenus
$(this).find(".subTopNav").show(); //show this submenu
});
$(".subTopNav").mouseleave(function() { //if mouse leaves the submenu
$(this).hide(); //hide the open submenu (this is what isn't working)
$(this).css('background-color','red'); //this works
})
});
<li class="topLine">
<span class="topNavItem">Item 1</span>
<ul class="subTopNav">
<li><a href="#">subItem 1</a></li>
<li><a href="#">subItem 2</a></li>
<li><a href="#">subItem 3</a></li>
</ul>
</li>
#topNavItems { display: inline; line-height: 40px; }
#topNavItems li { display: inline; font-weight: bold; margin-right: 45px; cursor: pointer; }
#topNavItems li a { text-decoration: none; color: #000000; }
.topLine { position: relative; }
.subTopNav { display: none; position: absolute; top: 20px; left: 25%; background-color: #000000; width: 145px; color: #FFFFFF; padding-left: 10px; }
.subTopNav li { display: block; color: #CCCCCC; font-weight: normal !important; font-size: 12px; line-height: 24px; margin-right: 0px !important; }
.subTopNav a { color: #CCCCCC !important; display: block; }
.subTopNav a:hover { color: #FFFFFF !important; }