随笔 - 1343, 文章 - 4, 评论 - 397, 阅读 - 427万
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

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

Posted on   linFen  阅读(2666)  评论(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>
点击右上角即可分享
微信分享提示