JQuery навигации и навигации навигация

Question

У меня возникли проблемы с навигацией jquery. Когда я наводил курсор на элемент меню, появляется элемент подменю, и я могу нависнуть над ними, моя проблема в том, что когда я нахожусь над элементом навигации или любым из подпунктов, подменю все же появляется. Мой вопрос в том, как я получу элементы подменю, которые не будут отображаться, когда вы закончите пункты подменю? если вы наведете от пункта меню или подменю, я пытаюсь получить пункты подменю не показывать (я действительно надеюсь, что это имеет смысл)

Вот мой код:

$(".galleryNavToggle").on("mouseenter", function (event) { 
    $('#headerNavGallery, #headerNavInfo').hide(); 
    $("#headerNavGallery").show(); 
}); 

$(".galleryNavInfoToggle").on("mouseenter", function (event) { 
    $('#headerNavGallery, #headerNavInfo').hide(); 
    $("#headerNavInfo").show(); 
}); 

HTML

<div class="headerNav"> 
<ul> 
<li><a href="index.php">Home</a></li> 
<li><a href="#" class='galleryNavToggle'>Gallery</a></li> 
<li><a href="#" class='galleryNavInfoToggle'>Info</a></li> 
</ul> 
</div><!--headerNav--> 

<div class="headerNavGallery" id="headerNavGallery" style="display:none;"> 
<ul> 
<li><a href="Categories.php?action=view">Categoies</a></li> 
<li><a href="Products.php?action=view">Products</a></li> 
</ul> 
</div><!--headerNavGallery--> 

<div class="headerNavInfo" id="headerNavInfo" style="display:none;"> 
<ul> 
<li><a href="willRuppel.php?action=view">William Ruppel</a></li> 
<li><a href="CV.php?action=view">CV</a></li> 
<li><a href="artistBio.php?action=view">Artist Bio</a></li> 
<li><a href="Video.php?action=view">Video</a></li> 
<li><a href="contact.php?action=view">Contact</a></li> 
</ul> 
</div><!--headerNavInfo--> 

если кто-нибудь может мне точку в правильном направлении, которое было бы удивительным, есть у меня были эти проблемы в течение многих недель сейчас и не могу найти решение, которое вы можете увидеть это на http://www.willruppelglass.com

Спасибо, J

Answer 1

Это похоже на достойный учебник для создания меню вниз. Вы должны проверить это и реорганизовать html и css. Вам не нужно использовать javascript для выпадающих меню. http://www.threestyles.com/tutorials/css-drop-down-navigation-tutorial/

Приветствия!

Answer 2

Попробуйте поместить навигацию в один список и используйте .hover() для управления атрибутом css display. Скрипт с ним here.

Список иерархии:

[nav container] 
    [primary nav item] 
    [secondary nav item] 
    [secondary nav item] 
    [primary nav item] 
    [secondary nav item] 
    [secondary nav item] 
    [secondary nav item] 

JS:

$(document).ready(function(){ 
     $('#nav-container li.primary-nav-item').hover(
      function() { $('ul', this).css('display', 'block'); }, 
      function() { $('ul', this).css('display', 'none'); }); 
    });​