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

当前位置: 首页 > 图文教程 > 网页特效 > 网页文字特效 > 网页特效代码:纯css下拉菜单列表

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

No. « ‹ 1 2 »

技术文章搜索

关键字

网页文字特效中的网页特效代码:纯css下拉菜单列表

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

收藏到网摘: n/a

css制作的有弹动效果的网页导航复古风格纯css下拉菜单网页特效

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

<!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="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(/upload/tech/20100103/20100103125632_0aa1883c6411f7873cb83dacb17b0afc.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(/upload/tech/20100103/20100103125632_5c572eca050594c7bc3c36e7e8ab9550.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(/upload/tech/20100103/20100103125633_aab3238922bcc25a6f606eb525ffdc56.gif) no-repeat center center;} dl.menu dt a.plusa:focus, dl.menu dt a.plusa:active {margin-right:1px; background:url(/upload/tech/20100103/20100103125633_aab3238922bcc25a6f606eb525ffdc56.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(/upload/tech/20100103/20100103125633_00411460f7c92d2124a67ea0f4cb5f85.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">Flashguns & 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 全部选择 ]

css制作的有弹动效果的网页导航复古风格纯css下拉菜单网页特效

网页文字特效 中的 网页特效代码:纯css下拉菜单列表

评论 (0) All

网页文字特效中的网页特效代码:纯css下拉菜单列表