概述
body { font-family: Verdana;font-size: 12px; line-height: 1.5; }
a { color: #000;text-decoration: none; }
a:hover { color: #F00; }
#menu { width:370px; margin:0auto; border: 1px solid #CCC; height:26px; background:#eee;}
#menu ul { list-style: none;margin: 0px; padding: 0px; }
#menu ul li { float:left; padding: 0px 8px; height: 26px;line-height: 26px; }//让菜单横向排列
#menu ul li a { display:block;padding: 0px 8px; height: 26px; line-height: 26px; float:left;}//为了兼容IE6.
#menu ul li a:hover {background:#333; color:#fff;}
图片美化横向导航：
显示效果如下：
用到三张图片，分别为当前状态，鼠标放上时样式，和默认样式用的图片：
下面修改css 样式，只截图了一张，设置方法相同：
<styletype="text/css">
body { font-family: Verdana;font-size: 12px; line-height: 1.5; }
a { color: #000;text-decoration: none; }
a:hover { color: #F00; }
#menu { width:500px;height:28px; margin:0 auto; border-bottom:3px solid #E10001;}
#menu ul { list-style: none;margin: 0px; padding: 0px; }
#menu ul li { float:left;margin-left:2px;}
#menu ul li a { display:block;width:87px; height:28px; line-height:28px; text-align:center;
background:url(/upload/2010-08/17/091033_nav_bg2.gif)0 0 no-repeat; font-size:14px;}
#menu ul li a:hover {background:url(/upload/2010-08/17/091033_nav_bg3.gif) 0 0 no-repeat;}
#menu ul li a#current {background:url(/upload/2010-08/17/091033_nav_bg1.gif) 0 0 no-repeat;font-weight:bold; color:#fff;}
</style>
<body>
<divid="menu">
<ul>
<li><aid="current" href="#">首页</a></li>
<li><ahref="#">网页版式</a></li>
<li><a href="#">web教程</a></li>
<li><ahref="#">web 实例</a></li>
<li><ahref="#">常用代码</a></li>
</ul>
</div>
</body>
background:#cccurl(images/nav_bg2.gif) 0 0 no-repeat;
1）其中图片放置目录，已经url设置：
/根目录（从工程根目录开始）
~/虚拟站点根目录
../上级目录（../../上上级目录）
./当前目录
2）url后面的两个参数第一个代表距左多少px，第二参数表示距上多少px。0可以不带单位，其他数值必须带单位。3）no-repeat表示背景图片向哪个方向重复，此时为不重复。
最后
以上就是俭朴画笔为你收集整理的div+css 横向导航菜单的全部内容，希望文章能够帮你解决div+css 横向导航菜单所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复