HTML

<div id='nav'><div class='welcome'>歡迎您：xxx <a href='#'>[退出登錄]</a></div><ul class='menu'><li><a href='#'>樣式雷圖檔</a></li><li><a href='#'>樣式雷世家相關文獻<table><tr><td><ul><li><a href='#'>雷氏族譜</a></li><li><a href='#'>雷氏祖塋碑拓片</a></li><li><a href='#'>雷氏祖先畫像</a></li></ul></table></tr></td></a></li><li><a href='#'>工程籍本</a></li><li><a href='#'>檔案文獻</a></li><li><a href='#'>測繪圖</a></li><li><a href='#'>研究成果<table><tr><td><ul><li><a href='#'>學位論文</a></li><li><a href='#'>期刊論文</a></li><li><a href='#'>專著</a></li><li><a href='#'>析出文獻</a></li></ul></table></tr></td></a></li><li><a href='#'>全局檢索</a></li><li><a href='#'>大事記</a></li><li><a href='#'>管理用戶</a></li><li><a href='#'>查看所有用戶</a></li><li><a href='#'>修改用戶密碼</a></li><li><a href='#'>查看個人信息</a></li><li><a href='#'>修改個人密碼</a></li><li><a href='#'>任務菜單<table><tr><td><ul><li><a href='#'>添加任務</a></li><li><a href='#'>上傳</a></li><li><a href='#'>一級審核</a></li><li><a href='#'>管理員審核</a></li><li><a href='#'>修改審核</a></li></ul></table></tr></td></a></li></ul></div>

CSS

*{margin:0;padding:0; } #nav{width:200px;float:left; } #nav .welcome{width:100%;margin:10px 0 30px 0; } #nav a{text-decoration:none;color:#000000;white-space:nowrap; } #nav a:hover{color:red; } #nav ul{list-style-type:none; } #nav ul.menu{overflow:auto; } #nav ul a{display:block;border:1px solid #cccccc;float:left;/*防止菜單項換行*/clear:left;width:190px;line-height:30px;margin-bottom:2px;padding-left:5px; } #nav ul a a{width:180px;float:right;clear:right; } #nav table{border-collapse: collapse; } #nav ul a:hover{font-weight:bold;background-color:#ffffff; } #nav ul a ul{display:none;width:190px; } #nav ul a:hover ul,#nav ul li:hover ul{display:block; }

需注意的地方：

1、在IE6中，好像僅a標簽支持hover偽類

2、將ul li組織的二級菜單放在a標簽里，需要設置a標簽的屬性：display：block；，因為inline元素里不能嵌套block元素

3、做了2中的設置之后，FF中布局都不正常，IE個版本中鼠標懸停在一級菜單的a標簽上，二級菜單也不顯示，搜到這個解釋“if nothing happens to the <a> element on hover, usually nothing will happen on hover on any child elements either. A colour or background colour change is usually all that is required.”并參考這篇文章http://www.cnblogs.com/rubylouvre/archive/2009/09/28/1575294.html，在ul li組織的二級菜單外面在加一層表格，二級菜單可以顯示了

4、在2中設置a標簽的屬性：display：block；又引出了一個BUG：每個a標簽包的菜單項后面都自動換行了。參考這篇文章解決http://www.elingxi.com/a/css/091E32010.html

?

轉載于:https://www.cnblogs.com/acaciasun/p/3343618.html

總結

以上是生活随笔為你收集整理的纯CSS实现多级菜单，兼容IE6的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。