为使列表美观,让第二行到以后设置border-top:0px;第一行设置为1px;
前面的小小红色竖线我设置了一个边框来表现他。
lianxi2.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/lianxi2.css"/>
</head>
<body>
<div class="div1">
<ul class="ul1">
<li class="li0 "><i class="i0"></i>保养品 <i class="i1 "/></i></li>
<li class="li1 "><i class="i0"></i>驾驶室类 <i class="i1 "/></i></li>
<li class="li1 "><i class="i0"></i>发动机类 <i class="i1 "/></i></li>
<li class="li1 "><i class="i0"></i>桥箱类<i class="i1 "/></i></li>
<li class="li1 "><i class="i0"></i>电器类 <i class="i1 "/></i></li>
<li class="li1 "><i class="i0"></i>底盘类 <i class="i1 "/></i></li>
</ul>
</div>
</body>
</html>
lianxi.css
@charset "utf-8";
.ul1{
list-style: none;
}
.li0{
height: 50px;
width: 240px;
border: 1px solid gainsboro;
font-size: 20px;
text-indent: 1em;
line-height: 50px;
}
.li1{
height: 50px;
width: 240px;
border: 1px solid gainsboro;
border-top: 0px;
font-size: 20px;
text-indent: 1em;
line-height: 50px;
}
.i0{
float: left;
height: 48px;
width: 1px;
background-color: white;
border: 1px solid white;
}
.i1{
width: 25px;
height: 25px;
border: 0px solid blue;
float: right;
margin-top: 10px;
margin-right: 5px;
background: url(../img/nav-jt.png);
background-position: 5px 0px;
}
li:hover{
background-color: gainsboro;
}
li:hover .i0{
border: 1px solid red;
background-color: red;
}
li:hover .i1{
background-position: 5px 20px;
}