支付宝下拉圆角导航菜单特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是支付宝下拉圆角导航菜单特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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" />
<meta name="keywords" content="JS代码,菜单导航,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为支付宝下拉圆角导航菜单，属于站长常用代码" />
<link rel="stylesheet" type="text/css" href="css/lanrentuku.css" />
<title>支付宝下拉圆角导航菜单</title>
</head>
<body style="text-align:center">

<!--Head Menu Start-->
<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>
<!--Head Menu End-->
</body>
</html>

CSS代码(lanrentuku.css):

.frame-menu{position:relative;overflow:visible;zoom:1;width:970px;height:50px;margin:0 auto;padding:0;background:url(../images/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(../images/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;}

附件:下载该文件资源,减少时间成本(增值服务)