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>

One thought on “CSS实现多浏览器横向级联菜单”

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据