您的位置：首页 > Web前端 > JavaScript

js 支付宝圆角下拉导航菜单效果

2012-05-07 21:36 246 查看
http://www.111cn.net/js_a/javascript-dh/36636.htm

<!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>

<title>支付宝圆角下拉导航菜单效果</title>

<meta http-equiv="content-type" content="text/html;charset=gb2312">

<!--把下面代码加到<head>与</head>之间-->

<style type="text/css">

.frame-menu{position:relative;overflow:visible;zoom:1;width:970px;height:50px;margin:0 auto;padding:0;background:url(http://www.111cn.net/blog/upload/image/20101219082314.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://www.111cn.net/blog/upload/image/20101219082314.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>

<!--把下面代码加到<body>与</body>之间-->

<div class="frame-menu">

<ul>

<li>

<a href="#">账户充值

<div class="info">充值后用余额支付，支付方便、无限额</div>

</a>

</li>

<li>

<a href="#">账户安全升级

<div class="info">开通支付密码、手机服务更多保护</div>

</a></li>

<li>

<a href="#">生活助手

<div class="info">缴通信费、水电费…方便、快捷！</div>

</a>

</li>

<li>

<a href="#">收款/付款

<div class="info">同时向多人在线收款/网上付钱，方便、快捷！</div>

</a>

</li>

<li>

<a href="#">淘宝购物

<div class="info">中国最大网上购物商城：淘！我喜欢</div>

</a>

</li>

<li>

<a href="#">论坛

<div class="info">来论坛分享购物经验、省钱技巧；还能晒宝贝，赢大奖</div>

</a>

</li>

<li>

<a href="#">问吧

<div class="info">您有问题就在这里尽情的问吧！ </div>

</a>

</li>

</ul>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航