您當(dāng)前位置：首頁 > web前端 > htmlcss > 自適應(yīng)寬度的二級橫向CSS菜單

自適應(yīng)寬度的二級橫向CSS菜單

來源：程序員人生發(fā)布時間：2014-03-27 17:04:18 閱讀次數(shù)：2762次

　　昨天替人弄一個二級橫向菜單。做完之后，習(xí)慣性地在IE6中測試了一下，結(jié)果發(fā)現(xiàn)寬度一如即往的沒有自適應(yīng)。

　　解決：對目標(biāo)進行浮動，使其自適應(yīng)寬度。

#menu a{ float:left;}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=GBK" /><title>auto-fit-width-horizontal-css-menu - LIEHUO.NET</title><style type="text/css">*{margin:0; padding:0;}#menu{height:4em; background:#07a; position:relative;}#menu ul{width:inherit; height:2em; background:#fff;}#menu li{ float:left;line-height:2em;list-style:none;}#menu a{ float:left;margin:0 5px; padding:0 1em; height:100%;background:#0af; text-align:center; color:#eee; text-decoration:none;}/*左浮動使IE6寬度自適應(yīng)*/#menu li:hover a, #menu li.hover a{background:#07a;}#menu li:hover ul, #menu li.hover ul{display:block;}#menu li ul{display:none;position:absolute; top:2em; clear:both;}#menu li ul a{margin:0;background:#07a; font-size:.8em}</style></head><body><div id="menu"><ul><li><a href="#" _fcksavedurl="#">菜單1</a><ul><li><a href="#" _fcksavedurl="#">菜單11</a></li><li><a href="#" _fcksavedurl="#">菜單12</a></li><li><a href="#" _fcksavedurl="#">菜單13</a></li><li><a href="#" _fcksavedurl="#">菜單14</a></li></ul></li><li class="current"><a href="#" _fcksavedurl="#">長長的菜單2</a><ul><li><a href="#" _fcksavedurl="#">菜單21</a></li><li><a href="#" _fcksavedurl="#">真的長長的菜單22</a></li><li><a href="#" _fcksavedurl="#">菜單23</a></li><li><a href="#" _fcksavedurl="#">菜單24</a></li></ul></li><li><a href="#" _fcksavedurl="#">菜單3</a><ul><li><a href="#" _fcksavedurl="#">菜單31</a></li><li><a href="#" _fcksavedurl="#">菜單32</a></li><li><a href="#" _fcksavedurl="#">菜單33</a></li><li><a href="#" _fcksavedurl="#">菜單34</a></li></ul></li><li><a href="#" _fcksavedurl="#">菜單4</a><ul><li><a href="#" _fcksavedurl="#">菜單41</a></li><li><a href="#" _fcksavedurl="#">菜單42</a></li><li><a href="#" _fcksavedurl="#">菜單43</a></li><li><a href="#" _fcksavedurl="#">菜單44</a></li></ul></li><li><a href="#" _fcksavedurl="#">菜單5</a><ul><li><a href="#" _fcksavedurl="#">菜單51</a></li><li><a href="#" _fcksavedurl="#">菜單52</a></li><li><a href="#" _fcksavedurl="#">菜單53</a></li><li><a href="#" _fcksavedurl="#">菜單54</a></li></ul></li></ul></div></body></html>本代碼來自網(wǎng)，更多教程：http://www.vxbq.cn/
提示：可修改后代碼再運行!

生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學(xué)習(xí)有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

------分隔線----------------------------

上一篇 CSS教程：樣式化順序列表

下一篇 Dreamweaver寫CSS應(yīng)該學(xué)會的技巧

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

自適應(yīng)寬度的二級橫向CSS菜單