网页二级菜单的实现

效果如上图：

显示用的li元素

HTML如下：

<div id="menubox">
    <table border="0" cellpadding="0" cellspacing="0" id="menu">
        <tr style="height:24px;">
            <td style="width:22px; height: 24px;"></td>
            <td onmouseover="showSubmenu('01',5);" style="height: 24px" ><a>水库信息</a></td>
            <td onmouseover="showSubmenu('02',145);" style="height: 24px"><a>建筑物管理</a></td>
            <td onmouseover="showSubmenu('05',350);" style="height: 24px"><a>防汛抗旱</a></td>
            <td onmouseover="showSubmenu('03',430);" style="height: 24px"><a>工程管理</a></td>
            <td onmouseover="showSubmenu('04',590);" style="height: 24px"><a>政策知识</a></td>
        </tr>
     </table>
    <div id="submenutext"></div>
<div id="navigation">
    <ul id="submenu01">
        <li><a href="NewDetails.aspx?id=1">库区概况</a></li>
        <li><a href="NewDetails.aspx?id=2">流域概况</a></li>
        <li><a href="NewDetails.aspx?id=3">组织结构</a></li>
        <li><a href="NewDetails.aspx?id=4">领导介绍</a></li>
    </ul>
    <ul id="submenu02">
        <li><a href="NewsList.aspx?supid=80">建筑物基本情况</a></li>
        <li><a href="NewsList.aspx?supid=81">建筑物相关图纸</a></li>
    </ul>
    <ul id="submenu03">
        <li><a href="NewsList.aspx?supid=76">工程概况</a></li>
        <li><a href="NewsList.aspx?supid=77">工程图纸</a></li>
        <li><a href="NewsList.aspx?supid=78">工程录像</a></li>
    </ul>
    <ul id="submenu04">
        <li><a href="NewsList.aspx?supid=67">水法知识</a></li>
        <li><a href="NewsList.aspx?supid=68">其它政策</a></li>
    </ul>
    <ul id="submenu05">
        <li><a href="NewsList.aspx?supid=83">水雨工情</a></li>
        <li><a href="NewsList.aspx?supid=84">防汛抗旱</a></li>
    </ul>
</div> 
</div>

把他们放在一个水平位置上，调整submenutext这个div层的margin-left设置或获取对象的左边距宽度，这样控制margin-left,二级菜单的ul就会滑动。

前面的程序员用table做，控制td的padding-left，但只要超过一半的DIV宽度就会换行。

我改用DIV做。

使用的JQuery脚本是这样的：

<script type="text/javascript" src="skin/scripts/jquery.min.js"></script>
<script type="text/javascript">
function showSubmenu(source,margin)
{
    $('#submenutext').css('margin-left',margin + 'px');
    $('#submenutext').html($('#submenu'+source).html());
}
</script>