简单的基于JS和CSS的菜单
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渐变深绿色图片