展开全部
<style>
ul,li{padding:0;margin:0;}
ul{width:240px;height:35px;}
li{display:block;float:left;width:60px;height:100%;border-bottom:1px #000 solid; text-align:center;}
.act,li:hover{background:url(icon.png) no-repeat bottom;border-bottom:1px #00923f solid;}
</style>
<ul>
<li class="act">aaaa</li>
<li>bbbb</li>
<li>cccc</li>
<li>dddd</li>
</ul>
其实没有那么复杂。
原理：
设置LI的底边框为黑色，然后把这几个LI都左浮动，这样它们就贴在一起了，连成一条底线，
然后LI:HOVER的时候，给LI加上背景图片和改变LI的底框颜色跟你图片的一样就可以了。。
也可以通过LI里加一个A，DISPLAY:BLOCK后，给它MARGIN-BOTTOM:-1PX来盖住原来线，也可以给它们做定位，，这些都行得通。。
但是个人觉得还是我上面写的那些比较简单实现。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
提供一种思路：把下面那条线当做ul的背景来处理，你可以用position来定位。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
导航用<ul><li>来
例如：<ul>
<li><a href="">最近更新</a></li>
</ul>
样式的话：ul li{float:left;}
ul li a:hover{background:rel(放入切好的背景效果图片路径);}
鼠标放上去，就回出现文字下面的图片、那个是背景图片，切下来就行了。
例如：<ul>
<li><a href="">最近更新</a></li>
</ul>
样式的话：ul li{float:left;}
ul li a:hover{background:rel(放入切好的背景效果图片路径);}
鼠标放上去，就回出现文字下面的图片、那个是背景图片，切下来就行了。
追问
但是 那个背景图片是默认加载li 的上border的 就是border-top； 怎么让他在下 border
padding margin 都不行 （不用 position 定位的话）
追答
没别的了吧，background-position：0px 15px，自己调一下，就能实现呀。难道要弄个JS来控制啊。切图的时候，切仔细点，别留出太多
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
