45IT.COM- 电脑学习从此开始!
DIY硬件教程攒机经验装机配置
设计Photoshop网页设计特效
系统注册表DOS系统命令其它
存储主板显卡外设键鼠内存
维修显卡CPU内存打印机
WinXPVistaWin7unix/linux
CPU光驱电源/散热显示器其它
修技主板硬盘键鼠显示器光驱
办公ExcelWordPowerPointWPS
编程数据库CSS脚本PHP
网络局域网QQ服务器
软件网络系统图像安全
页面导航: 首页 > 设计学院 > 网页特效 >

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

电脑软硬件应用网 45IT.COM 时间:2009-10-29 11:45 作者:佚名

纯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 &amp; Tripods</a>
<a href="#url">Flashguns &amp; 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 &amp; 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>

顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
无法在这个位置找到: baidushare.htm
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码:点击我更换图片
你可能感兴趣的文章
推荐知识