[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 >