博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

UL、LI标签蓝色垂直CSS菜单

Posted on 2009-08-09 01:21  linFen  阅读(2665)  评论(0编辑  收藏  举报

演示效果截图

UL、LI标签蓝色垂直CSS菜单

用到的图片



CSS代码

.glossymenu{list-style-type: none;margin: 5px 0;
padding: 0;width: 170px;border: 1px solid #9A9A9A;
border-bottom-width: 0;}
.glossymenu li a{
background: white url(glossyback.gif) repeat-x bottom left;
font: bold 12px "Lucida Grande", "Trebuchet MS",
Verdana, Helvetica, sans-serif;
color: white;display: block;width: auto;
padding: 3px 0;padding-left: 10px;text-decoration: none;}
* html .glossymenu li a{width: 160px;}
.glossymenu li a:visited, .glossymenu li a:active{
color: white;}
.glossymenu li a:hover{background-image: url(glossyback2.gif);}

HTML代码

<ul class="glossymenu">
<li><a href="http://www.865171.cn/">免费模板网</a></li>
<li><a href="http://www.865171.cn/">CSS模板</a></li>
<li><a href="http://www.865171.cn/">后台模板</a></li>
<li><a href="http://www.865171.cn/">CSS代码</a></li>
<li><a href="http://www.865171.cn/">CSS菜单</a></li>
<li><a href="http://www.865171.cn/">CSS图表</a></li>
</ul>