支付寶CSS下拉圓角導航菜單

2024-09-05 12:20:46

字體：大中小

來源：轉載

供稿：網友

樣式美觀，適合對導航欄目內容進行說明的網站。

<!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>支付寶下拉圓角導航菜單</title><style>.frame-menu{position:relative;overflow:visible;zoom:1;width:970px;height:50px;margin:0 auto;padding:0;background:url(/jscss/demoimg/201011/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(/jscss/demoimg/201011/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   id="bnvprhx"   class="frame-menu">  <ul>    <li>  賬戶充值      <div   id="5dlrdzz"   class="info">充值后用余額支付,支付方便、無限額</div>       </li>    <li>  賬戶安全升級      <div   id="lltbxlb"   class="info">開通支付密碼、手機服務更多保護</div>       </li>    <li>  生活助手      <div   id="dbnt5xp"   class="info">繳通信費、水電費…方便、快捷！</div>       </li>    <li>  收款/付款      <div   id="lxfztjx"   class="info">同時向多人在線收款 / 網上付錢，方便！快捷！ </div>       </li>    <li>  淘寶購物      <div   id="tf75xlz"   class="info">中國最大網上購物商城,淘,我喜歡！</div>       </li>    <li>  論壇      <div   id="z7jpjzb"   class="info">來論壇分享購物經驗、省錢技巧；還能曬寶貝，贏大獎</div>       </li>    <li>  問吧      <div   id="plhr7np"   class="info">支付問題，請來這里吧</div>       </li>  </ul></div></body></html>

上一篇：具備延時功能的滑動門菜單

下一篇：jQuery 下拉菜單，很流行的效果