自适应宽度的二级横向CSS菜单_html-js-css

概述昨天替人弄一个二级横向菜单。做完之后，习惯性地在IE6中测试了一下，结果发现宽度一如即往的没有自适应。解决：对目标进行浮动，使其自适应宽度。 #menu a{ float:left;} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional…

　　昨天替人弄一个二级横向菜单。做完之后，习惯性地在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菜单全部内容，希望文章能够帮你解决自适应宽度的二级横向CSS菜单所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1022806.html

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

发表评论

评论列表（0条）