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

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

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

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

　　解決：對(duì)目標(biāo)進(jìn)行浮動(dòng)，使其自適應(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;}/*左浮動(dòng)使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.jyygyx.com/
提示：可修改后代碼再運(yùn)行!

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

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

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

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

分享到:

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

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

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