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

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

纯css下拉菜单列表，无hack，无IE判断，无table，无JS。测试浏览器 IE6、IE7、IE8、FF3.0

<!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="zh" lang="zh"> <head profile="http://www.w3.org/2000/08/w3c-synd/#"> <meta http-equiv="content-language" content="zh-cn" /> <meta http-equiv="content-type" content="text/html;charset=gb2312" /> <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/dl-clickslide.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. =================================================================== */ a, a:visited, a:hover, a:active, a:focus {} #positioner {position:relative; width:160px; height:160px; margin-left:10px;z-index:100;} #holder {position:absolute; width:150px; overflow:hidden; border:4px solid #000; border-width:4px 4px 3px 4px; background:#000;} dl.menu {width:300px; float:left; margin:-32700px -150px 0 0; background:url(http://www.itjxue.com/files/091028/1_174457.gif) no-repeat left bottom; margin-bottom:2px;} dl.menu a {display:block; height:30px; color:#000; font:bold 11px/28px verdana, sans-serif; text-decoration:none;} dl.menu dt {float:left; padding:0; margin:32700px 0 0 0; position:relative; z-index:50;} dl.menu dt a.lefta {width:105px; float:left; padding-left:25px;} dl.menu dt a.plusa {width:20px; float:left; background:url(http://www.itjxue.com/files/091028/1_174419.gif) no-repeat center center;} dl.menu dt a.plusa b {position:absolute; left:-9999px;} dl.menu dt a.lefta:hover, dl.menu dt a.lefta:focus, dl.menu dt a.lefta:active {color:#c00;} dl.menu dt a.plusa:hover {background:url(http://www.itjxue.com/files/091028/1_174313.gif) no-repeat center center;} dl.menu dt a.plusa:focus, dl.menu dt a.plusa:active {margin-right:1px; background:url(http://www.itjxue.com/files/091028/1_174313.gif) no-repeat center center; outline:0; position:relative; left:-9999px;} dl.menu dd {float:left; padding:30px 0 0 0; margin:-30px 0 0 0; position:relative; z-index:10; background:url(http://www.itjxue.com/files/091028/1_174217.gif) no-repeat left top;} dl.menu dd a {background:#fff; width:125px; padding:5px 0 5px 25px; border-bottom:1px solid #ccc; font-weight:normal; line-height:17px; height:auto;} dl.menu dd a:hover, dl.menu dd a:focus, dl.menu dd a:active {margin-right:1px; color:#c00; outline:0;} </style> </head> <body> <div id="positioner"> <div id="holder"> <dl class="menu"> <dt> <a class="lefta" href="#link">Home</a> </dt> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link">Products</a> <a class="plusa" href="#url"><b>+</b></a> </dt> <dd> <a href="#url">Digital Cameras</a> <a href="#url">Monopods & Tripods</a> <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> <a href="#url">Telephoto Lenses</a> <a href="#url">Filters</a> <a href="#url">Lens Hoods</a> <a href="#url">Lens Adaptors</a> </dd> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link">Services</a> <a class="plusa" href="#url"><b>+</b></a> </dt> <dd> <a href="#url">Enlarging</a> <a href="#url">Framing & Restoring</a> <a href="#url">Printing</a> <a href="#url">Copying</a> <a href="#url">Sepia Toning</a> <a href="#url">Archiving</a> </dd> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link">Outlets</a> <a class="plusa" href="#url"><b>+</b></a> </dt> <dd> <a href="#url">London</a> <a href="#url">Gloucestershire</a> <a href="#url">East Midlands</a> <a href="#url">Glasgow</a> <a href="#url">Bristol</a> <a href="#url">Exeter</a> </dd> </dl> <dl class="menu"> <dt> <a class="lefta" href="#link">Terms</a> <a class="plusa" href="#url"><b>+</b></a> </dt> <dd> <a href="#url">Payment Methods</a> <a href="#url">Conditions of Sale</a> <a href="#url">Privacy Policy</a> </dd> </dl> </div> </div> </body> </html>

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

(责任编辑：IT教学网)

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

上一篇：复古风格纯css下拉菜单网页特效

下一篇：css制作的有弹动效果的网页导航

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

(责任编辑：IT教学网)

相关网页文字特效文章

阅读排行

专题教程

推荐网页文字特效文章

最新更新网页文字特效