0顶

纯css制作漂亮下拉菜单

稿源：互联网 2022-07-28 13:37:06 点击： 3761 撤稿纠错

很漂亮的下拉菜单，纯css打造，您可以自己修改样式。

以下讨论的是和下拉菜单相关的纯css制作漂亮下拉菜单教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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">
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(/img/1_174457_zzjs.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.www_zzjs_net {width:105px; float:left; padding-left:25px;}
dl.menu dt a.plusa {width:20px; float:left; background:url(/img/1_174419_zzjs.gif) no-repeat center center;}
dl.menu dt a.plusa b {position:absolute; left:-9999px;}
dl.menu dt a.www_zzjs_net:hover,
dl.menu dt a.www_zzjs_net:focus,
dl.menu dt a.www_zzjs_net:active {color:#c00;}
dl.menu dt a.plusa:hover {background:url(/img/1_174313_zzjs.gif) no-repeat center center;}
dl.menu dt a.plusa:focus,
dl.menu dt a.plusa:active
{margin-right:1px; background:url(/img/1_174313_zzjs.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(/img/1_174217_zzjs.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>
<a href="http://www.zzjs.net/">站长特效网</a>,站长必备的高质量网页特效和广告代码。zzjs.net，站长js特效。<hr>

<div id="positioner">
<div id="holder">
<dl class="menu">
<dt>
<a class="www_zzjs_net" href="#link">Home</a>
</dt>
</dl>
<dl class="menu">
<dt>
<a class="www_zzjs_net" 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="www_zzjs_net" 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="www_zzjs_net" 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="www_zzjs_net" 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>

关于纯css制作漂亮下拉菜单的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2010090664477.shtml方便下次再访问哦。

·上一篇： css实现鼠标经过导航文字偏位效果
·下一篇： 复古风格导航菜单

文章分类LIST >>返回首页

排行总榜

避免你的邮箱地址被自动收集的代码
有趣的按钮
控制用按钮打开新窗口的属性
单击按钮或图片打开IE首页
点击按钮打印该页
仿软件浮动按钮
在规定时间内方有效的按钮
一个按钮完成对文本框内容的复制
按钮选中文本框内所有内容
Windows式样的按钮

纯css制作漂亮下拉菜单

文章分类LIST >>返回首页

最新游戏

最新新闻