Why won't this jquery.hide() function work on this UL element?

[ajalk]

The submenu appears successfully, but will not hide with the \[code\]mouseleave\[/code\] function. Running a console.log() shows an event WILL fire at the correct moment when the mouse exits the \[code\]<ul>\[/code\], but it won't hide for some reason. I can, however, change other styles (like the background of the \[code\]<ul>\[/code\] to red or something.) Very puzzling...\[code\]$(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 })});\[/code\]\[code\]<li class="topLine"><span class="topNavItem">Item 1</span><ul class="subTopNav"> <li><a href="http://stackoverflow.com/questions/14034763/#">subItem 1</a></li> <li><a href="http://stackoverflow.com/questions/14034763/#">subItem 2</a></li> <li><a href="http://stackoverflow.com/questions/14034763/#">subItem 3</a></li></ul></li>\[/code\]\[code\]#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; }\[/code\]