Question

在jaychapani的帮助下，我的导航栏的子菜单上下滑动。现在当我将鼠标悬停在subsubmenu1上时，我希望它的孩子向右滑动。有谁知道怎么做？

以下是在导航栏中向上滑动和向下滑动的jquery代码。

    <script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $("#submenu1,#submenu2").children().hide();

    $("#submenu1,#submenu2").hover( 
        function(){//onmouseover 
            $(this).children("ul").slideDown(); 
        }, 
        function(){//onmouseout 
            $(this).children("ul").slideUp(); 
    }); 
});
</script>

导航栏的CSS：

    #navbar{
/*  height:10%;
*/  width:900px;
    background-color:#000000;
    color:#ffffff;
    float:left;
    margin-top:2%;
    }

ul{
    list-style-type:none;
    margin:0;
    padding:0;
}
li{
float:left;
    display:block;
    width:120px;
    text-align:center;
}

导航栏的html代码：

<div id="navbar">
<ul id="menu">
    <li>Home</li>
    <li>About</li>
    <li id="submenu1">Register Company
        <ul>
            <li id="subsubmenu1">New Sendirian Berhad Registration
                <ul>
                    <li>Company Price</li>
                    <li>Register New Company</li>
                    <li>Steps to Incorporate</li>


    </ul>
                </li>
            </ul>
        </li>
        <li id="submenu2">Buy Company
            <ul>
                <li>Sendirian Berhad Ready Made Companies in Malaysia</li>
            </ul>
        </li>
        <li>Contact</li>
    </ul>
</div>

Answer 1

您已将id="submenu1" id="submenu2"放在<ul> <li>上<div id="navbar"> <ul id="menu"> <li>Home</li> <li>About</li> <li id="submenu1">Register Company <ul> <li>New Sendirian Berhad Registration <ul> <li>Company Price</li> <li>Register New Company</li> <li>Steps to Incorporate</li> </ul> </li> </ul> </li> <li id="submenu2">Buy Company <ul> <li>Sendirian Berhad Ready Made Companies in Malaysia</li> </ul> </li> <li>Contact</li> </ul> </div>

像

{{1}}

DEMO

jquery：导航栏subsubmenu的孩子在悬停时向右滑动？

1 个答案: