Jquery 子导航div一直隐藏

我有一个严重的导航问题，但似乎无法让它工作。根据子导航显示，将鼠标悬停在主导航分区中的

项目上时。 但当鼠标悬停在它们上面时，它不会保持活动类状态。选择主导航li时，子导航应保持不变。离开SUNBNAV时，初始SUNBNAV应重新出现

请注意，我们在document.ready函数（在另一个PHP include中定义）之后加载一个活动的subnav

我们非常感谢您的帮助。我迷路了：-）

所有主要的li导航项都位于此处：

<div id="navigation-main">
    <div id="mainnav"> 
    <div class="navigation-items">
        <ul> 
        <li id="mainnav1" class="active"><a href="#" id="header">Button 1</a></li> 
        <li id="mainnav2"><a href="#">Button 2</a></li> 
        <li id="mainnav3"><a href="#">Button 3</a></li> 
        <li id="mainnav4"><a href="#">Button 4</a></li> 
        </ul> 
    </div> 
    </div> 
</div> 

---

您必须将

.navigation sub

移动到

mainnav

中，才能将其隐藏在

mainnave

的鼠标上。还有，你用的是mouseout，我想你指的是mouseleave：

---

我希望这能解决你的问题

您必须将

.navigation子导航

移动到

mainnav

中，以便将其隐藏在

mainnave

的鼠标上。还有，你用的是mouseout，我想你指的是mouseleave：

---

我希望这能解决你的问题

你能提供更好的HTML吗？在你的例子中，很难看到元素之间的关系。谢谢Joey，我在文章中修改了HTML代码。另外，这里有一个在线示例：您能提供更好的HTML吗？在你的例子中，很难看到元素之间的关系。谢谢Joey，我在文章中修改了HTML代码。还有，这里有一个在线例子：你摇滚乔伊！有时候你只需要其他人来看看：）很高兴我能提供一个答案：）你太棒了，乔伊！有时候你只需要别人来看看：）很高兴我能提供答案：）

<div id="navigation-sub1" class="navigation-sub">navigation-sub 1  active</div> 
<div id="navigation-sub2" class="navigation-sub">navigation-sub 2 active</div> 
<div id="navigation-sub3" class="navigation-sub">navigation-sub 3 active</div> 
<div id="navigation-sub4" class="navigation-sub">navigation-sub 4 active</div> 

$(document).ready(function() { 

    var activeId = $(".active").attr("id").replace("mainnav",""); 
    $("#navigation-sub" + activeId).show();

    $("#mainnav a").hover(function() { 
        //reset 
        $(".navigation-sub").hide(); 
        $("#mainnav .active").removeClass("active"); 

        //act 
        $(this).addClass("active") 
        var id = $(this).closest("li").attr("id").replace("mainnav",""); 
        $("#navigation-sub" + id).show();

    }); 

    $("#mainnav").mouseout(function() {
        $(".navigation-sub").hide(); 
        $("#navigation-sub" + activeId).show();
    }); 

});