學習筆記 css垂直導航
![]()
<!DOCTYPE html>
<html>
<head>
<style>
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
li a{
display: block;
width: 200px;
height: 39px;
line-height: 39px;
text-decoration: none;
color: #000;
background: url(pixy-rollover.gif) no-repeat left bottom;
text-indent: 50px;
}
.first a {
height: 40px;
line-height: 40px;
}
a:hover {
color: #fff;
background-position: right bottom;
}
</style>
</head>
<body>
<ul>
<li class="first"><a href="">111111111111</a></li>
<li><a href="">222222222222</a></li>
<li><a href="">333333333333</a></li>
<li><a href="">444444444444</a></li>
<li><a href="">555555555555</a></li>
</ul>
</body>
</html>
