CSS实现多浏览器横向级联菜单

最近项目在优化前端代码的时候到了一个匪夷所思的地步，于是把动态菜单的js也喀嚓了，用CSS实现

主要是用a:hover的原理，Test了一下IE6 7 8 chrome FF 都兼容。
暂时只支持两级。

到这里可以查看这个小Demo

IE6下有个小bug，如果a:hover跟a的标签没有任何改变的话触发不了hover效果，所以把position:relative写在a:hover里边了

PS:临时测试，css代码胡乱写了….

<ul>
<li>
<!–[if IE 6]><a href=”#”><table><tr><td><![endif]–>
<a href=”#”>菜单1</a>
<p>
<a href=”#”>子菜单1</a>
<a href=”#”>子菜单2</a>
<a href=”#”>子菜单3</a>
</p>
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>
<li style=”background-color:#9FF;”>
<!–[if IE 6]><a href=”#” style=”background-color:#9FF;”><table><tr><td><![endif]–>
<a href=”#”>菜单2</a>
<p>
<a href=”#”>子菜单4</a>
<a href=”#”>子菜单5</a>
<a href=”#”>子菜单6</a>
</p>
<!–[if IE 6]></td></tr></table></a><![endif]–>
</li>