效果如下：
实现方法：利用一下两张图片：
前台代码：
<div id="nagivation">
<ul >
<li ><a href="mainbooks.aspx"><b>首页</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=1"><b>文学</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=2"><b>小说</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=3"><b>艺术</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=4"><b>管理</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=5"><b>考试</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=6"><b>工具书</b></a></li>
<li ><a href ="bookstoretop.aspx?topid=7"><b>科技</b></a></li>
</ul>
</div>
css：
#nagivation
{
width: 1180px;
margin-right: auto;
margin-left: auto;
height: 28px;
background-image: url('wangyeimg/daohang.jpg');
display: block;
}
#nagivation ul
{
margin: 0px;
display: block;
height: 28px;
padding-left: 8px;
}
#nagivation ul li
{
display: block;
float: left;
height: 28px;
padding-top: 5px;
}
#nagivation ul li a
{
padding: 5px 0px 0px 14px;
text-decoration : none;
color : White;
height: 30px;
}
#nagivation ul li a b
{
padding: 0px 14px 0px 0px;
height: 28px;
}
#nagivation ul li a:hover
{
background-image: url('wangyeimg/huadong.jpg');
background-position: right top;
}
#nagivation ul li a:hover
{
background-image: url('wangyeimg/huadong.jpg');
color :Red ;
}