橙色水平web2.0CSS菜单
2009-08-09 01:30
309 查看
演示效果截图
用到的图片
CSS代码
#time4bed-nav{position:relative;height:43px;font-size:14px; text-transform:uppercase;background:#fff url("/UploadFile/image/orange-css-nav/time4bed_bg.gif") repeat-x bottom left;font-family:Georgia, "Times New Roman", Times, serif;} #time4bed-nav ul{margin:0;padding:0;list-style-type:none; width:auto;float:left;} #time4bed-nav ul li{display:block;float:left;margin:0 2px;} #time4bed-nav ul li a{display:block;float:left;color:#ffdab6; text-decoration:none;padding:0 0 0 25px;height:43px;line-height:50px;} #time4bed-nav ul li a span{display:block;float:left; padding:0 25px 0 0;height:31px;width:auto;} #time4bed-nav ul li a:hover{color:#fff;} #time4bed-nav ul li a:hover span{display:block;cursor:pointer;} #time4bed-nav ul li a.current,#time4bed-nav ul li a.current:hover{ color:#894d12;background:transparent url("/UploadFile/image/orange-css-nav/time2bed_left-ON.gif") no-repeat top left;} #time4bed-nav ul li a.current span{background:transparent url("/UploadFile/image/orange-css-nav/time2bed_right-ON.gif") no-repeat top right;height:43px;}
HTML代码
<div id="time4bed-nav"> <ul> <li><a href="http://www.865171.cn/"> <span>Home</span></a></li> <li><a href="http://www.865171.cn/" class="current"> <span>About Us</span></a></li> <li><a href="http://www.865171.cn/"> <span>www.865171.cn</span></a></li> </ul> </div>
相关文章推荐
- CSS橙色二级水平菜单
- 橙色、黑色、栗色形成的水平CSS菜单
- 橙色玻璃效果水平CSS菜单
- 纯div+css水平三级导航菜单
- 水平导航菜单(DIV+CSS)
- 水平方向的PopMenu-弹出菜单(DIV+CSS+JS)
- div+css水平三级横向弹出菜单
- web前端,html+css+jquery实现水平菜单
- 亮蓝色水平CSS选项卡菜单
- 虚线效果水平CSS菜单
- CSS青灰色二级下拉水平菜单
- css水平三级横向弹出菜单
- [CSS]CSS Cookbook例子:创建水平导航菜单
- 创建水平菜单CSS
- jQuery+css实现的蓝色水平二级导航菜单效果代码
- 使用CSS双层滑动门技术实现三态玻璃效果水平导航菜单
- CSS蓝色水平选项卡菜单
- 紫罗兰水平CSS菜单
- 下拉水平菜单 js div+css 超实用 可链接数据库