CSS 导航菜单

        这个导航菜单完全使用css样式控制 . 很实用 , 推荐给各位 .
  HTML代码 :
<ul class="sidenav">
<li>
    <a href="http://www.pecloud.cn">www.pecloud.cn
    <span>一个以交流学习经验为基础的学习性blog , 提供了drupal ,
    wordpress , seo技术 , php/mysql , jQuery技术 , java技术 ,
    各个博客的 blogs , drupal案例,wordpress案例
</span>
    </a>
</li>
<li>
    <a href="http://www.pecloud.cn">Drupal 建站技术
    <span>Drupal框架的使用方法 , 以及Drupal 的模块列表 , 钩子函数的使用 .</span>
    </a>
</li>
<li>
    <a href="http://www.pecloud.cn">搜索引擎优化(SEO)技术
    <span>关于网站的搜索引擎优化(SEO)知识 , 其中也包含Drupal的建站的搜索引擎优化seo优化知识,</span>
    </a>
</li>
</ul>
CSS 样式代码 :
<style type="text/css">
body {
background: #222;
font: 10px Verdana, Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
}
a:focus {
outline: none;
}
ul.sidenav {
font-size: 1.2em;
float: left;
width: 200px;
margin: 0;
padding: 0;
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(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(images/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: 0.8em;padding: 10px 0;
}
</style>

预览CSS 导航菜单           下载 CSS导航菜单