复古风格纯css下拉菜单网页特效- 网页文字特效

当前位置: 首页 > 图文教程 > 网页特效 > 网页文字特效 > 复古风格纯css下拉菜单网页特效

网页文字特效: 网页文字特效:逐渐变色的文字特效

No. « ‹ 1 2 »

技术文章搜索

关键字

网页文字特效中的复古风格纯css下拉菜单网页特效

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-03 浏览: 164 ::

收藏到网摘: n/a

网页特效代码:纯css下拉菜单列表网页特效代码:文字变化的导航菜单

两张背景图片纯css实现，测试浏览器：IE6, IE7, IE8, Firefox, Opera, Google Chrome and Safari(PC)。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title> new document </title> <meta name="generator" content="editplus"> <meta name="author" content=""> <meta name="keywords" content=""> <meta name="description" content=""> <style type="text/css"> /* ================================================================ This copyright notice must be untouched at all times. The original version of this stylesheet and the associated (x)html is available at http://www.cssplay.co.uk/menus/image-map-menu.html Copyright (c) 2005-2009 Stu Nicholls. All rights reserved. This stylesheet and the associated (x)html may be modified in any way to fit your requirements. =================================================================== */ #menuHolder {width:690px; height:28px; padding:12px 0 0 60px; background:url(/upload/tech/20100103/20100103125634_142949df56ea8ae0be8b5306971900a4.png); position:relative; z-index:500; border-top:1px solid #510; border-bottom:1px solid #510;} #menuHolder table {border-collapse:collapse; position:absolute; left:0; top:0;} #menuHolder ul {padding:0; margin:0; list-style:none;} #menuHolder ul ul {position:absolute; left:-9999px;} #menuInner {padding:0; width:635px; height:28px;} #menuInner li {float:left; padding-right:20px;} #menuInner li.terms {padding:0;} #menuInner li a {display:block; height:28px;} #menuInner li a b {position:absolute; left:-9999px;} #menuInner li.home a {width:75px;} #menuInner li.products a {width:135px;} #menuInner li.services a {width:125px;} #menuInner li.outlets a {width:115px;} #menuInner li.terms a {width:105px;} #menuInner li a:hover {background:url(/upload/tech/20100103/20100103125634_ad13a2a07ca4b7642959dc0c4c740ab6.png); position:relative;} #menuInner li.home a:hover {background-position:-60px -12px;} #menuInner li.products a:hover {background-position:-155px -12px;} #menuInner li.services a:hover {background-position:-310px -12px;} #menuInner li.outlets a:hover {background-position:-455px -12px;} #menuInner li.terms a:hover {background-position:-590px -12px;} #menuInner li:hover {position:relative;} #menuInner li:hover > a {background:url(/upload/tech/20100103/20100103125634_ad13a2a07ca4b7642959dc0c4c740ab6.png);} #menuInner li.home:hover > a {background-position:-60px -12px;} #menuInner li.products:hover > a {background-position:-155px -12px;} #menuInner li.services:hover > a {background-position:-310px -12px;} #menuInner li.outlets:hover > a {background-position:-455px -12px;} #menuInner li.terms:hover > a {background-position:-590px -12px;} #menuInner :hover ul {left:0; top:28px; background:url(/upload/tech/20100103/20100103125634_142949df56ea8ae0be8b5306971900a4.png); border:1px solid #510; border-width:0 1px 1px 1px; padding-bottom:5px;} #menuInner :hover ul li {float:none;} * html #menuInner :hover ul li {float:left;} /* for IE6 */ #menuInner :hover ul li a {background:transparent; color:#000;font:bold 14px/28px verdana, arial, sans-serif; text-decoration:none; padding-left:10px; white-space:nowrap; float:none; width:100%;} #menuInner :hover ul li a:hover {color:#fff;} #menuInner li.products a:hover ul {background-position:-155px -40px;} #menuInner li.services a:hover ul {background-position:-310px -40px;} #menuInner li.outlets a:hover ul {background-position:-455px -40px;} #menuInner li.terms a:hover ul {background-position:-590px -49px;} #menuInner li.products:hover ul {background-position:-155px -40px;} #menuInner li.services:hover ul {background-position:-310px -40px;} #menuInner li.outlets:hover ul {background-position:-455px -40px;} #menuInner li.terms:hover ul {background-position:-590px -49px;} </style> </head> <body> <div id="menuHolder"> <ul id="menuInner"> <li class="home"><a href="#url"><b>Home</b></a></li> <li class="products" ><a href="#url"><b>Products</b></a>  <ul> <li><a href="#url">Digital Cameras</a></li> <li><a href="#url">Monopods & Tripods</a></li> <li><a href="#url">Flashguns & Reflectors</a></li> <li><a href="#url">Telephoto Lenses</a></li> </ul>  </li> <li class="services" ><a href="#url"><b>Services</b></a>  <ul> <li><a href="#url">Enlarging</a></li> <li><a href="#url">Framing & Restoring</a></li> <li><a href="#url">Printing</a></li> <li><a href="#url">Copying</a></li> <li><a href="#url">Sepia Toning</a></li> </ul>  </li> <li class="outlets" ><a href="#url"><b>Outlets</b></a>  <ul> <li><a href="#url">London</a></li> <li><a href="#url">Gloucestershire</a></li> <li><a href="#url">East Midlands</a></li> <li><a href="#url">Glasgow</a></li> </ul>  </li> <li class="terms" ><a href="#url"><b>Terms</b></a>  <ul> <li><a href="#url">Payment</a></li> <li><a href="#url">Conditions</a></li> <li><a href="#url">Privacy Policy</a></li> </ul>  </li> </ul> </div> </body> </html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

用到的两个图片：

网页特效代码:纯css下拉菜单列表网页特效代码:文字变化的导航菜单

网页文字特效 中的 复古风格纯css下拉菜单网页特效

评论 (0) All

网页文字特效中的复古风格纯css下拉菜单网页特效