网页特效
建站首页
|
广告代码
|
源码下载
|
站长工具
|
字体下载
|
网页模板
|
收藏本站
|
设为首页
网站首页
菜单导航
日期时间
背景图像
图层样式
鼠标键盘
页面窗口
色彩表格
链接文字
表单按钮
计数转换
游戏娱乐
综合实例
特效
热门搜索:
特效代码
js脚本
导航菜单
热点推荐:
英文字体
人民币汇率
dw插件
站长常用软件
alexa排名查询
您的位置:
网页特效
->
菜单导航
-> 支付宝样式美观的CSS下拉圆角效果导航菜单
支付宝样式美观的CSS下拉圆角效果导航菜单
作者:admin 发布时间:2010-11-27 9:10:29 发布人: admin
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>支付宝样式美观的CSS下拉圆角效果导航菜单</title> <style> .frame-menu{ position:relative;overflow:visible;zoom:1;width:970px;height:50px;margin:0 auto;padding:0;background:url(http://web.archive.org/web/20150530064435im_/http://myjs.jz123.cn/img/bg-frame.png) no-repeat left top;line-height:1.5;font-size:12px;} .frame-menu ul{ position:absolute;z-index:98;top:7px;left:10px;margin:0;padding:0;} .frame-menu ul li{ float:left;list-style:none outside;width:110px;} .frame-menu ul li a:link,.frame-menu ul li a:visited{ display:block;margin:0;padding:8px 0 0 0;*padding:10px 0 0 0;text-align:center;font-size:13px;font-weight:700;color:#fff;text-decoration:none;} .frame-menu ul li a:hover{ height:109px;*height:107px;color:#AB6A00;background:url(http://web.archive.org/web/20150530064435im_/http://myjs.jz123.cn/img/bg-frame.png) no-repeat left -50px;} .frame-menu ul li a div{ display:none;padding:10px 5px 0 5px;margin:0;text-align:left;font-size:12px;font-weight:400;} .frame-menu ul li a:hover div.info{ display:block;color:#fff;} </style> </head> <body style="text-align:center"> <div class="frame-menu"> <ul> <li> <a href="#" target="_blank"> 账户充值 <div class="info">充值后用余额支付,支付方便、无限额</div> </a> </li> <li> <a href="#" target="_blank"> 账户安全升级 <div class="info">开通支付密码、手机服务更多保护</div> </a> </li> <li> <a href="#" target="_blank"> 生活助手 <div class="info">缴通信费、水电费…方便、快捷！</div> </a> </li> <li> <a href="#" target="_blank"> 收款/付款 <div class="info">同时向多人在线收款 / 网上付钱，方便！快捷！ </div> </a> </li> <li> <a href="#" target="_blank"> 淘宝购物 <div class="info">中国最大网上购物商城,淘,我喜欢！</div> </a> </li> <li> <a href="#" target="_blank"> 论坛 <div class="info">来论坛分享购物经验、省钱技巧；还能晒宝贝，赢大奖</div> </a> </li> <li> <a href="#" target="_blank"> 问吧 <div class="info">支付问题，请来这里吧</div> </a> </li> </ul> </div> </body> </html>
支付宝样式美观的CSS下拉圆角效果导航菜单
将本文收藏到QQ书签与更多好友分享
上一篇：文章：
鼠标感应延时功能的滑动门菜单
下一篇：文章：
js+css精美二级导航菜单
本类浏览排行 »
js+css精美二级导航菜单
支付宝样式美观的CSS下拉圆角效果导航菜单..
鼠标感应延时功能的滑动门菜单
同时布局在单个页面中的两个简洁美观的Ta..
css模拟按钮效果的导航菜单
利用CSS的Clip属性来创造多彩文字
JS实现Li列表的无缝垂直文字滚动代码
文字从页面顶部掉下来
本站推荐文章 »
JS实现Li列表的无缝垂直文字滚动代码
带关闭功能的网站顶部滑出的广告提示条
漂亮的404错误页面
比较实用的二级下拉导航菜单
点击图片直接把图片地址复制到粘贴板
一款常用的漂亮的JS图片滑动切换效果
兼容ie6、ie7、ff、opera、safari的水平垂..
一款设计精美的CSS滑动门菜单