一个不被flash、select、activex遮挡的、跨frame的无限分级菜单

一个不被flash、select、activex遮挡的、跨frame的无限分级菜单

该菜单改良自著名的chromemenu ，可以无限分级，使用方法：

1、添加主菜单项

找到类似下面代码的部分：

以下为引用的内容：

<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" rel="dropmenu1">Resources</a></li>
<li><a href="#" rel="dropmenu2">News</a></li>
<li><a href="#" rel="dropmenu3">Search</a></li>
</ul>
</div>


在<ul>内部添加一个<li>,即可新添加一个主菜单项，注意给出“rel”的值，如上述代码所示。

2、为一个主菜单添加下拉菜单：

先看一级菜单的写法：

以下为引用的内容：

<!--子菜单1-->
<div id="dropmenu1" class="menu">
<ul>                    
<li><a href="#" target="_self" title="内部邮件">内部邮件</a></li>
<li><a href="#" target="_self">待办公文</a></li>
<li><a href="#" target="_self">工作安排</a></li>
<li><a href="#" target="_self">公文处理</a> </li>
</ul>
</div>


注意div的id要和对应的主菜单项的rel参数相同，当鼠标移动到此菜单项时即可显示下拉菜单，菜单样式由class控制。

再来看怎么添加分级菜单，先看代码：

以下为引用的内容：

<!--子菜单1-->
<div id="dropmenu6" class="menu">
<ul>                    
<li><a href="#" target="_self" title="驾驶舱">驾驶舱</a>
<!--[if lte IE 6]><a href="#">驾驶舱<table><tr><td><![endif]-->
<ul>
<li><a href="#" title="管理驾驶舱">管理驾驶舱</a></li>
<li><a href="#" title="单位预警舱">单位预警舱</a></li>
</ul>
<!--[if lte IE 6]> </td></tr></table></a> <![endif]-->
</li>

    <li><a href="#" target="_self">待办公文</a></li>
<li><a href="#" target="_self">工作安排</a></li>
<li><a href="#" target="_self">公文处理</a> </li>
</ul>
</div>


要为哪个菜单项建立子菜单，就在其<li>内部添加代码段：

以下为引用的内容：

<!--[if lte IE 6]><a href="#">驾驶舱<table><tr><td> <![endif]-->
<ul>
<li><a href="#" title="管理驾驶舱">管理驾驶舱</a></li>
<li><a href="#" title="单位预警舱">单位预警舱</a></li>
</ul>
<!--[if lte IE 6]> </td></tr></table></a> <![endif]-->


注意子菜单中的“<li><iframe style=”position:absolute;top:0px; left:0px;z-index:2;width:150px;height:176px;border:0;” frameborder=0 scrolling=no></iframe></li>”，目的是解决被activex覆盖的问题，如果页面上没有activex，可不用。

比较好用的下拉多级菜单，chromemenu！！

下载地址：http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm