自适应宽度的二级横向CSS菜单代码,Css代码库,德仔网

代码语言

代码分类

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

作者:Dezai.CN / 发布于2012/4/17/ 730

自适应宽度的二级横向CSS菜单:解决：对目标进行浮动，使其自适应宽度。

<div><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml">http://www.w3.org/1999/xhtml</a>">
<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>
<!--[if lt IE 7]>
<script src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js</a>" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $('#menu li').bind('mouseenter mouseleave',function(){
 $(this).toggleClass('hover');
 })
});
</script>
<![endif]-->
</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>
</div>

试试其它关键字

　CSS菜单　

同语言下

可能有用的

Dezai.CN贡献的其它代码(4037)