新收獲
昨天替人弄一個(gè)二級(jí)橫向菜單。做完之后，習(xí)慣性地在IE6中測(cè)試了一下，結(jié)果發(fā)現(xiàn)寬度一如即往的沒有自適應(yīng)。
解決：對(duì)目標(biāo)進(jìn)行浮動(dòng)，使其自適應(yīng)寬度。
#menu a{ float:left;}
IE6
當(dāng)前:
<!--[if lt IE 7]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$('#menu li').bind('mouseenter mouseleave',function(){
$(this).toggleClass('hover');
})
});
</script>
<![endif]-->
備選:
<!--[if IE 6]><style type="text/css">body{behavior:url("/style/csshover.htc");}</style><![endif]-->
注:
附帶動(dòng)畫版，限制了寬度，適應(yīng)性更高。
HTML Code
<!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=utf-8" />
<title>auto-fit-width-horizontal-css-menu</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>
<!--[if lt IE 7]>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" 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="#">菜單1</a>
<ul>
<li><a href="#">菜單11</a></li>
<li><a href="#">菜單12</a></li>
<li><a href="#">菜單13</a></li>
<li><a href="#">菜單14</a></li>
</ul>
</li>
<li class="current"><a href="#">長(zhǎng)長(zhǎng)的菜單2</a>
<ul>
<li><a href="#">菜單21</a></li>
<li><a href="#">真的長(zhǎng)長(zhǎng)的菜單22</a></li>
<li><a href="#">菜單23</a></li>
<li><a href="#">菜單24</a></li>
</ul>
</li>
<li><a href="#">菜單3</a>
<ul>
<li><a href="#">菜單31</a></li>
<li><a href="#">菜單32</a></li>
<li><a href="#">菜單33</a></li>
<li><a href="#">菜單34</a></li>
</ul>
</li>
<li><a href="#">菜單4</a>
<ul>
<li><a href="#">菜單41</a></li>
<li><a href="#">菜單42</a></li>
<li><a href="#">菜單43</a></li>
<li><a href="#">菜單44</a></li>
</ul>
</li>
<li><a href="#">菜單5</a>
<ul>
<li><a href="#">菜單51</a></li>
<li><a href="#">菜單52</a></li>
<li><a href="#">菜單53</a></li>
<li><a href="#">菜單54</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
預(yù)覽/下載：
/css-html/auto-fit-width-horizontal-css-menu.htm
/css-html/auto-fit-width-horizontal-css-menu-animated-version.htm
Tag標(biāo)簽: css,html,menu,jquery
