效果：

html代码

1 <div class="head">
2     <ul class="navi">
3         <li class="navi_menu_first"><a href="#">公司简介</a></li>
4         <li class="navi_menu"><a href="#">产品简介</a></li>
5         <li class="navi_menu"><a href="#">我的留言</a></li>
6     </ul>
7 </div>

css代码

 1 body{
 2     width: 800px;height: 1000px;
 3     margin: 5px auto;padding:0px;position: relative;
 4 }
 5 .head{
 6     width: 798px;height: 58px;margin-top: 0px;border: 1px solid transparent;
 7     border-bottom: 6px solid #b72526;background: url("images/navi.jpg") 0 0 no-repeat;
 8     position: relative;
 9 }
10 .navi{
11     display: block;margin: 0px;padding:0px;list-style: none;position: absolute;
12     bottom: 0px;left:80px;width: 350px;height: 20px;border: 1px solid transparent;
13 }
14 .navi_menu_first{
15     display: inline;width: 68px;height: 20px;border: 1px solid transparent;float: left;
16     font-size: 11px;color: white;
17     padding: 6px 5px 2px 10px;
18 }
19 .navi_menu{
20     display: inline;width: 68px;height: 20px;border: 1px solid transparent;float: left;
21     font-size: 11px;color: white;margin-left: 6px;
22     padding: 6px 5px 2px 10px;
23     /*如果padding设置了4个值，那么顺序是顺时针，但是上和左优先考虑*/
24 }
25 .navi a,.navi a:link,.navi a:visited{
26     color: white;text-decoration: none;
27 }
28 .navi a:hover{
29     color:red;
30 }
31 /*注意a伪类的先后顺序。其实如果要设置访问后必须为红色，可以将a:visited放在a:hover那一行。