蓝色CSS竖直菜单

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< title > 蓝色CSS竖直菜单_网页代码站(www.webdm.cn) </ title >
< style type ="text/css" >
body {
background : black ;
margin : 0 ;
padding : 0 ;
}
a:focus {
outline : none ;
}
ul.sidenav {
font-size : 9pt ;
float : left ;
width : 200px ;
list-style : none ;
background : #005094 ;
border-bottom : 1px solid #3373a9 ;
border-top : 1px solid #003867 ;
}
ul.sidenav li a {
display : block ;
color : #fff ;
text-decoration : none ;
width : 155px ;
padding : 10px 10px 10px 35px ;
background : url(http://www.webdm.cn/images/20090910/sidenav_a.gif) no-repeat 5px 7px ;
border-top : 1px solid #3373a9 ;
border-bottom : 1px solid #003867 ;
}
ul.sidenav li a:hover {
background : #003867 url(http://www.webdm.cn/images/20090910/sidenav_a.gif) no-repeat 5px 7px ;
border-top : 1px solid #1a4c76 ;
}
ul.sidenav li span { display : none ; }
ul.sidenav li a:hover span {
display : block ;
font-size : 9pt ;
padding : 10px 0 ;
}
</ style >
</ head >
< body >
< ul class ="sidenav" >
< li >
< a href ="http://www.webdm.cn/" > 网页代码站
< span > 提供精品代码、网页特效下载。 </ span >
</ a >
</ li >
< li >
< a href ="#" > 源码博客
< span > 讲述源码爱好者的故事…… </ span >
</ a >
</ li >
< li >
< a href ="http://www.webdm.cn/" > 现在下载
< span > 大量精品源代码，想下就下…… </ span >
</ a >
</ li >
< li >
< a href ="http://www.webdm.cn/" > 源码论坛
< span > 交流代码，讨论WEB前端及后端…… </ span >
</ a >
</ li >
< li >
< a href ="#" > 官方客服
< span > 向您介绍源码爱好者提供的精品服务…… </ span >
</ a >
</ li >
</ ul >
</ body >
</ html >
< br >
< a href ="http://www.webdm.cn" > 网页代码站 </ a > - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！

文章来自：http://www.webdm.cn/webcode/9b7d2fd9-2cec-439f-b005-a86b8bb7194f.html

转载于:https://www.cnblogs.com/webdm/archive/2011/01/11/1932525.html