学习http://www.blueidea.com/tech/web/2007/4545_2.asp
代码试验
html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="2.css">
</head> <body>
<ul id="nav">
<li>
<a href="#">Home</a>
</li> <li>
<a href="#">About Us</a>
</li> <li>
<a href="#">Services</a>
</li> <li>
<a href="#">Clients</a>
</li> <li>
<a href="#">Contacts</a>
</li>
</ul> </body>
</html>
css
* {
margin: 0px;
padding: 0px;
}
#nav {
background:url(4.png) repeat-y;
width: 200px;
overflow: hidden;
}
#nav li {
height: 35px;
width: 190px;
padding-top:15px;
}
#nav a {
background:#60758C no-repeat left center;
text-decoration: none;
height: 30px;
width: 155px;
display: block; <!--让链接以块状方式呈现-->
float: right;
padding: 0px 0px 0px 5px;
font-weight: bold;
font-size: 15pt;
line-height: 30px;
color:#FFF;
border-left:10px solid #F66; <!--组装黄色修饰块盒子(a的左边框，如果又独立用一个盒子来做就不科学了，因为此方法最简单)，直接给a加入下面一条样式即可-->
}
#nav a:hover {
background: #00A8D5; <!--鼠标移到链接上时，链接风格的改变指定一个样式-->
color: #FFFFFF;
}
显示结果