[div+css]竖排菜单
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Menu</title>
6 <style>
7
8 body{
9 background-color: #ffded0;
10 }
11 #box{
12 width:120px;
13 font-size: 12px;
14 font-family: "宋体";
15 }
16 #box ul{
17 margin:0px;
18 padding:0px;
19 list-style-type: none;
20 }
21 #box li{
22 border-bottom: #ed9f9f solid 1px;
23
24 }
25 #box li a{
26 display: block;
27 padding: 5px 5px 5px 8px;
28 text-decoration: none;
29 border-left: 12px solid #711515;
30 border-right: 1px solid #711515;
31 }
32 /*动态菜单的效果*/
33 #box li a:link{
34 background-color: #c11136;
35 color:#ffffff;
36 }
37 #box li a:visited{
38 background-color: #c11136;
39 color:#ffffff;
40 }
41 #box li a:hover{
42 background-color: #990020;
43 color:#ffff00;
44 }
45 </style>
46 </head>
47 <body>
48 <div id="box">
49 <ul>
50 <li><a href="#">首页</a></li>
51 <li><a href="#">音乐MP3</a></li>
52 <li><a href="#">个人相册</a></li>
53 <li><a href="#">我的博客</a></li>
54 <li><a href="#">我的空间</a></li>
55 </ul>
56 </div>
57 </body>
58 </html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Menu</title>
6 <style>
7
8 body{
9 background-color: #ffded0;
10 }
11 #box{
12 width:120px;
13 font-size: 12px;
14 font-family: "宋体";
15 }
16 #box ul{
17 margin:0px;
18 padding:0px;
19 list-style-type: none;
20 }
21 #box li{
22 border-bottom: #ed9f9f solid 1px;
23
24 }
25 #box li a{
26 display: block;
27 padding: 5px 5px 5px 8px;
28 text-decoration: none;
29 border-left: 12px solid #711515;
30 border-right: 1px solid #711515;
31 }
32 /*动态菜单的效果*/
33 #box li a:link{
34 background-color: #c11136;
35 color:#ffffff;
36 }
37 #box li a:visited{
38 background-color: #c11136;
39 color:#ffffff;
40 }
41 #box li a:hover{
42 background-color: #990020;
43 color:#ffff00;
44 }
45 </style>
46 </head>
47 <body>
48 <div id="box">
49 <ul>
50 <li><a href="#">首页</a></li>
51 <li><a href="#">音乐MP3</a></li>
52 <li><a href="#">个人相册</a></li>
53 <li><a href="#">我的博客</a></li>
54 <li><a href="#">我的空间</a></li>
55 </ul>
56 </div>
57 </body>
58 </html>
