0

在 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>
4

1 回答 1

2

你穿上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>​

演示

于 2012-08-30T12:30:41.673 回答