网页二级菜单的实现

效果如上图：

显示用的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>

我的理解，因为DIV  和ul都是块的元素。

把他们放在一个水平位置上，调整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>

onmouseover=="showSubmenu('01',5);" 两个参数source,margin ,source指定控制哪个ul，margin控制前面div的坐边距宽度来使ul刚好在父菜单的下面。