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

http://www.itjxue.com 2015-08-05 00:19 来源:未知 点击次数:

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

<!DOCTYPE <a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=html&' target='_blank'><u>html</u></a> 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(http://www.itjxue.com/files/091109/1_013016.png); position:relative; z-index:500; border-top:1px solid #510; border-bottom:1px solid #510;} #menuHolder table {border-colla<a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=ps&se' target='_blank'><u>ps</u></a>e: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(http://www.itjxue.com/files/091109/1_012958.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(http://www.itjxue.com/files/091109/1_012958.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(http://www.itjxue.com/files/091109/1_013016.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"><a href='http://www.itjxue.com/plus/search.php?kwtype=0&keyword=Flash' target='_blank'><u>Flash</u></a>guns & 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 全部选择提示：你可先修改部分代码，再按运行]

用到的两个图片：

(责任编辑：IT教学网)

复制链接发给好友收藏本文关闭此页

上一篇：网页特效代码:按设定时间滚动的文本信息

下一篇：网页特效代码:纯css下拉菜单列表

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

(责任编辑：IT教学网)

相关网页文字特效文章

阅读排行

专题教程

推荐网页文字特效文章

最新更新网页文字特效