自定义多级菜单

每次进入cloudgamer的博客，看着他神奇般的实现各种绚丽的功能，就流口水，也想通过自己的代码来实现！~

这两天终于抽出时间看了cloudgamer的博客，

计划从简单的功能看起——自定义多级联动菜单(http://www.cnblogs.com/cloudgamer/archive/2008/06/28/1231557.html)

看了很久的代码，终于看出些名堂了，我也模仿他的方法，写了个类似的功能，不过他的面向对象实现得比我好得多

ok，不多说了，进入正题：

 

我是利用ul、li来实现的，菜单的结构为：

<ul>

 <li>menu1

   <ul>

    <li>menu1_1</li>

   <li>menu1_2</li>

  </ul>

 </li>

</ul>

实现原理为：当鼠标移动li上时，就触发一个事件，如果该li下有ul（也就是子菜单）就显示出来

ul和li的样式定义都很重要

ul的样式定义：

ul{list-style-type:none;padding:0px;margin-left:0px;position:absolute}

li的样式定义：

li{display:block; width:120px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; padding:0px; text-align:center; margin-left:0px; position:relative; }

这里面，将li的position定义为：relative，ul的position定义为：absolute，这样ul对其上级li就是相对的，可以很好的控制菜单的位置。

 

另外值得提下的是：在定义在li中的链接（也就是li a）的样式时，在ie和firefox中显示的效果不对，虽然以前在博客中已经写了css之!important，这个时候却没有想起来可以用，浪费了好多时间去调整：

li a:link,li a:visited{ display:block !important; display:inline; width:120px; height:40px; color:#000; text-decoration:none; background:#c5dbf2; }

具体表现为：当display设置为block时，在ie中，如果鼠标移到一个含有子菜单的li上，则该li与其同级的li中间会出现间距

而设置为inline的话，则在firefox效果会很差；找了好久没找到可以处理ie中间距的方法，就!important兼容了。

 

样式处理好后，就可以定义菜单了，代码中，菜单的结构为：

 var menus = [ {'txt':'menu1↓','position':'down','menu':[ {'txt':'menu1_1→','position':'right','menu':[ {'txt':'menu1_1_1'}, {'txt':'menu1_1_2'}, {'txt':'menu1_1_3'}, {'txt':'menu1_1_4'} ]}, {'txt':'men