程序员人生网站导航

自适应宽度的二级横向CSS菜单

栏目：htmlcss时间：2014-03-27 17:04:18

　　昨天替人弄一个二级横向菜单。做完之后，习惯性地在IE6中测试了一下，结果发现宽度一如即往的没有自适应。

　　解决：对目标进行浮动，使其自适应宽度。

#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宽度自适应*/#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>本代码来自网，更多教程：http://www.wfuyu.com/
提示：可修改后代码再运行!

------分隔线----------------------------

上一篇 CSS教程：样式化顺序列表

下一篇 Dreamweaver写CSS应该学会的技巧

------分隔线----------------------------