<!DOCTYPE HTML><html lang="en"><head><meta charset="UTF-8"><title>利用float製作相容ie6純css下來菜單</title><style type="text/css">* { margin:0; padding:0; }ul { list-style:none; }a:hover { text-decoration:; color:#555; }.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }.nav a:hover { margin-right:1px; background:#3cf; }.nav dd ul { float:left; font-size:0; z-index:888; }.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }.nav dd li a:hover { margin-right:1px; }</style></head><body><dl class="nav"><dd><a href="">首頁</a></dd><dd><a href="">關於我們</a><ul><li><a href="">公司簡介</a></li><li><a href="">公司文化</a></li><li><a href="">企業榮譽</a></li><li><a href="">聯絡我們</a></li></ul></dd><dd><a href="">新聞動態</a><ul><li><a href="">國內新聞</a></li><li><a href="">國外新聞</a></li></ul></dd><dd><a href="">產品展示</a><ul><li><a href="">手機數位</a></li><li><a href="">移動硬碟</a></li><li><a href="">顯示器</a></li></ul></dd></dl></body></html>
dl.nav和ul 都浮動，利用 margin:-888px -150px 0 0;把子功能表ul隱藏起來；
當滑鼠移動到.nav a 上的時候.nav a:hover利用margin-right:1px;把子功能表了擠下來。
nav dd a + 子功能表的寬度.nav dd li a = 父系元素的和 .nav dd
PS:剛做好的時候ie7下有bug，.nav dd ul 加了個寬度就行了。。
PS2:加了個寬度後，ie7下能顯示子功能表了，但是無法點擊選擇。。。把.nav dd ul 的寬度設定為width:auto; 就可以了。。
ps3：把.nav dd ul 的overflow和寬度都去掉就正常了
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
