1 <style type="text/css">
2 #menu{
3 width:780px;
4 height:34px;
5 background-image:url(images/news_line.jpg);
6 background-repeat: repeat-x;
7 }
8 #menu ul{
9 margin:0 0 0 5px;
10 padding:0;
11 list-style-type:none;
12 }
13 #menu ul li{
14 padding-top:2px;
15 list-style-type:none;
16 margin:0;
17 float:left;
18 color:white;
19 font-size:13px;
20 line-height:34px;
21 }
22
23 #menu ul li a{
24 padding-left:10px;
25 padding-right:10px;
26 line-height:30px;
27 font-size:13px;
28 text-decoration:none;
29 display:block;
30 color:white;
31 }
32
33 #menu ul li a:hover{
34 color:red;
35 background-image: url(images/a_line.jpg);
36 background-repeat: repeat-x;
37 }
38
39 #menu ul li a#.select {
40 color:red;
41 background-image: url(images/a_line.jpg);
42 background-repeat: repeat-x;
43
44 }
45 </style>
46 <script language="javascript">
47 function setcurrent(n){
48 var current=document.getElementById("menu").getElementsByTagName("a");
49 for(i=0;i<current.length;i++)
50 current[i].className=i==(n-1)?"select":"";
51 }
52
53 </script>
54 <div id="menu">
55 <ul>
56 <li ><a class="select" href="#" onclick="setcurrent(1)">研究生教育新闻</a></li><li>|</li>
57 <li><a href="#" onclick="setcurrent(2)">思政工作</a></li><li>|</li>
58 <li><a href="#" onclick="setcurrent(3)">招生信息</a></li><li>|</li>
59 <li><a href="#" onclick="setcurrent(4)">培养信息</a></li><li>|</li>
60 <li><a href="#" onclick="setcurrent(5)">学位工作</a></li><li>|</li>
61 <li><a href="#" onclick="setcurrent(6)">学籍管理</a></li><li>|</li>
62 <li><a href="#" onclick="setcurrent(7)">公派留学</a></li><li>|</li>
63 <li><a href="#" onclick="setcurrent(8)">工程硕士</a></li><li>|</li>
64 <li><a href="#" onclick="setcurrent(9)">其他信息</a></li>
65 </ul>
66 </div>
67
其中a_line.jpg 是宽1高30的纯白背景图片 news_line.jpg 为宽1高34渐变深绿色图片