jquery - 如何将子菜单添加到下拉菜单

Question

fiddle :http://jsfiddle.net/yjp2sner/

HTML:

<div class="dropdown">
  <a href="javascript:void(0);" class="userLink"><span id="CPHB_lblUser">ADMIN</span></a>
  <div class="dvHolder">
    <ul id="ulDrop">
      <li><a class="ondrop reloadLink" href="Default.aspx" target="_self" title="Reload Page">Reload Page</a></li>
      <li id="liLogout" onclick="logout();">
        <span class="ondrop logoutLink">Logout</span>
      </li>
      <li><a class="ondrop viewfolderLink" href="javascript:void(0);" title="Reports">Reports</a>
      </li>
    </ul>
  </div>
</div>

我想要做的是为 li 添加一个具有相同样式的子菜单。因此，例如对于 Report 列表项，我想要一个向左滑出的子菜单，如下所示:

我如何修改我的 HTML/CSS 以允许这种情况发生。

Answer 1

$(document).ready(function(){
$(".top-level-menu li,.second-level-menu li").hover(
	function(){
		$(this).children('ul').hide();
		$(this).children('ul').slideDown('slow');
	},
	function () {
		$('ul', this).slideUp('fast');            
	});
});

.third-level-menu
    {
        position: absolute;
        top: 0;
        right: -150px;
        width: 150px;
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
    }

    .third-level-menu > li
    {
        height: 30px;
        background: #999999;
    }
    .third-level-menu > li:hover { background: #CCCCCC; }

    .second-level-menu
    {
        position: absolute;
        top: 30px;
        left: 0;
        width: 150px;
        list-style: none;
        padding: 0;
        margin: 0;
        display: none;
    }

    .second-level-menu > li
    {
        position: relative;
        height: 30px;
        background: #999999;
    }
    .second-level-menu > li:hover { background: #CCCCCC; }

    .top-level-menu
    {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .top-level-menu > li
    {
        position: relative;
        float: left;
        height: 30px;
        width: 150px;
        background: #999999;
    }
    .top-level-menu > li:hover { background: #CCCCCC; }

    .top-level-menu li:hover > ul
    {
        /* On hover, display the next level's menu */
        display: inline;
    }


    /* Menu Link Styles */

    .top-level-menu a /* Apply to all links inside the multi-level menu */
    {
        font: bold 14px Arial, Helvetica, sans-serif;
        color: #FFFFFF;
        text-decoration: none;
        padding: 0 0 0 10px;

        /* Make the link cover the entire list item-container */
        display: block;
        line-height: 30px;
    }
    .top-level-menu a:hover { color: #000000; }

<ul class="top-level-menu">
    <li><a href="#">Home</a></li>
    <li>
        <a href="#">Offices</a>
        <ul class="second-level-menu">
            <li><a href="#">Chicago</a></li>
            <li><a href="#">Los Angeles</a></li>
            <li>
                <a href="#">New York</a>
                <ul class="third-level-menu">
                    <li><a href="#">Information</a></li>
                    <li><a href="#">Book a Meeting</a></li>
                    <li><a href="#">Testimonials</a></li>
                    <li><a href="#">Jobs</a></li>
                </ul>
            </li>
            <li><a href="#">Seattle</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>