CSS实现横式压线菜单样式

html+div+css 1646 0 2013-08-19

CSS实现横式压线菜单样式
CSS样式:
.my_menu{ height:29px;} .my_menu ul{position:absolute; z-index:100} .my_menu ul li{float:left; padding-right:2px}
.my_menu ul li a{ display:block; border:#E4E4E4 1px solid; background:#fff; padding:8px 10px 0px; height:20px;}
.my_menu ul li a:hover{text-decoration:none; background:#F7FFF7} .my_menu ul li a.mcur{ border-bottom:#FFF 1px solid}

HTML代码:
<div>
<div class="my_menu"><ul><li><a href="#" class="mcur">基本信息</a></li><li><a href="#">景点介绍</a></li><li><a href="#">景区介绍</a></li><li><a href="#">游客须知</a></li><li><a href="#">景点线路</a></li><li><a href="#">修改密码</a></li><li><a href="#">安全退出</a></li></ul></div>
<div class="my_main">主体内容</div>
</div>

效果:

上一篇:网页音乐播放器代码

下一篇:CSS固定网页背景图片代码

讨论数量:0

请先登录再发表讨论。 2024-04-21

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链