[求助-系统问题]网页特效代码:纯css下拉菜单列表 [复制链接]

上一主题下一主题查看指定楼层

离线风晨

UID: 7791

超级会员

发帖: 2652

今日发帖

最后登录: 2018-03-03

只看楼主倒序阅读使用道具楼主发表于: 2009-10-29 14:06:27

纯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(http://www.webjx.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.webjx.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.webjx.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.webjx.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.webjx.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">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>