您现在的位置: 365建站网 > 365学习 > 自适应宽度的二级横向CSS菜单

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

文章来源:365jz.com     点击数:907    更新时间:2009-09-19 10:29   参与评论

新收获

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

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

#menu a{ float:left;}

IE6

当前:

<!--[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]-->

注:

附带动画版,限制了宽度,适应性更高。

HTML Code

预览/下载:

/css-html/auto-fit-width-horizontal-css-menu.htm

/css-html/auto-fit-width-horizontal-css-menu-animated-version.htm

Tag标签: css,html,menu,jquery

如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (907人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------