Code

多级菜单。
支持横向纵向两个方向。样式可自定义。
横向效果预览
纵向效果预览
代码
1.在body里加入如下HTML代码:

<ul class="sl_menu">  <!--横向效果定义样式:class="sl_menu sl_menu_vertical"-->
    <li><a href="#">Item One</a> »
        <ul>
            <li><a href="#">Item One</a> »
                <ul>
                    <li><a href="#">Item One</a> »
                        <ul>
                            <li><a href="#">Item One</a></li>
                            <li><a href="#">Item Two</a></li>
                            <li><a href="#">Item Three</a></li>
                            <li><a href="#">Item Four</a></li>
                            <li><a href="#">Item Five</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Item Two</a></li>
                    <li><a href="#">Item Three</a></li>
                    <li><a href="#">Item Four</a></li>
                    <li><a href="#">Item Five</a></li>
                </ul>
            </li>
            <li><a href="#">Item Two</a></li>
            <li><a href="#">Item Three</a></li>
            <li><a href="#">Item Four</a></li>
            <li><a href="#">Item Five</a></li>
        </ul>
    </li>
    <li><a href="#">Item Two</a> »
        <ul>
            <li><a href="#">Item One</a></li>
            <li><a href="#">Item Two</a></li>
            <li><a href="#">Item Three</a></li>
            <li><a href="#">Item Four</a></li>
            <li><a href="#">Item Five</a></li>
        </ul>
    </li>
    <li><a href="#">Item Three</a> »
        <ul>
            <li><a href="#">Item One</a></li>
            <li><a href="#">Item Two</a></li>
            <li><a href="#">Item Three</a></li>
            <li><a href="#">Item Four</a></li>
            <li><a href="#">Item Five</a></li>
        </ul>
    </li>
</ul>

2.在head标签内加入css文件:

<style type="text/css">
    ul.sl_menu, ul.sl_menu_vertical
    {
        margin: 0px;
        padding: 0px;
        list-style-type: none;
    }
    ul.sl_menu ul, ul.sl_menu_vertical ul
    {
        display: none;
    }
    ul.sl_menu li
    {
        float: left;
        width: auto;
    }
    ul.sl_menu
    {
        width: 870px;
    }
    ul.sl_menu_vertical
    {
        width: 80px;
    }
    ul.sl_menu_vertical li
    {
        float: none;
    }
    /* -- Sub-Menus -- */
    ul.sl_menu ul, ul.sl_menu_vertical ul
    {
        position: absolute;
        display: none;
        list-style-type: none;
        margin: 0px;
        padding: 0px;
        z-index: 10000;
    }
    ul.sl_menu ul li, ul.sl_menu_vertical ul li
    {
        float: none;
        margin: 0px;
    }
    ul.sl_menu, ul.sl_menu ul, ul.sl_menu_vertical, ul.sl_menu_vertical ul
    {
        background-color: #369;
        border: 1px solid #036;
        border-top: 1px solid #69C;
        border-left: 1px solid #69C;
        height: 20px;
    }
    ul.sl_menu_vertical
    {
        height: auto;
    }
    ul.sl_menu ul
    {
        height: auto;
    }
    * html ul.sl_menu ul
    {
        
    }
    ul.sl_menu li
    {
        font-family: sans-serif;
        font-size: 12px;
        color: #FFF;
        line-height: 14px;
        margin: 0px;
        padding:4px 7px 3px 7px;
        
        cursor: pointer;
        white-space: nowrap;
    }
    ul.sl_menu li li
    {

    }
    ul.sl_menu_vertical li a{_float:left;}/* -- for ie6 -- */
    ul.sl_menu_vertical li ul li a{_float:none;}/* -- for ie6 -- */
    ul.sl_menu li a
    {
        color: #FFF;
        text-decoration: none;
    }
    ul.sl_menu li.slm_hover, ul.sl_menu li.slm_active
    {
        background-color: #69C;
        color: #FFF;
        padding: 3px 6px 2px 6px;
        border: 1px solid #369;
        border-left: 1px solid #9CF;
        border-top: 1px solid #9CF;
    }
</style>

3.在head里引入js文件:

<script src="http://img.china-dirs.com.cn/public/js/jquery.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.dimensions.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.positionBy.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.bgiframe.js" type="text/javascript"></script>

<script src="http://img.china-dirs.com.cn/public/js/jquery.slMenu.js" type="text/javascript"></script>

4.继续在head里加入js代码:

<script type="text/javascript">
    $(function() {
        $('ul.sl_menu').slMenu();
        $('ul.sl_menu li ul li:has(ul)').find("a:eq(0)").after('<img src="right.gif" style="padding-left:5px;" />');
        //right.gif为小箭头图片
    })
</script>