<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#menu{ margin:0; padding:0; list-style:none; font:14px Arial; }
#menu li{ float:left;margin:0 1px 0 0;}
#menu li dl{width:150px; padding:0 0 10px 0;
background:#cb6 url(http://www.zishu.cn/attachments/month_0804/62008414231638.jpg) no-repeat bottom left;}
#menu li dt{padding:5px;text-align:center;border-bottom:1px solid #b00;
background:#ed8 url(http://www.zishu.cn/attachments/month_0804/02008414231556.jpg) no-repeat top left;}
#menu li dt a,#menu li dt a:visited{display:block;color:#333;text-decoration:none;}
#menu li dd{margin:0;padding:0;color:#fff;background-color:#47a;}
#menu li dd.last{border-bottom:1px solid #b00;}
#menu li dd a,#menu li dd a:visited{height:1em;display:block;color:#fff;
text-decoration:none;padding:4px 5px 4px 20px;
background:#47a url(http://www.zishu.cn/attachments/month_0804/y2008414231728.gif) no-repeat 7px 7px;}
#menu li dd{display:none;}
#menu li:hover dd,#menu li a:hover dd{display:block;}
#menu li:hover,#menu li a:hover{width:auto}
/*这句是后来加上的，如果不加会在IE6中有问题；width:auto是我随便写的，你删除后改成disploy:block或其它的内容，只要别它空就行*/
#menu li dd a:hover{ background-color:#147; color:#9cf;}
#menu table{ border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
</style>
</head>
<body>
<ul id="menu">
<li> <a href="#nogo">
<table>
<tr>
<td><dl>
<dt><a href="#">Artech Studio</a></dt>
<dd><a href="#">Web Dev</a></dd>
<dd><a href="#">Web Design</a></dd>
<dd><a href="#">Books</a></dd>
<dd class="last"><a href="#">Contact Us</a></dd>
</dl></td>
</tr>
</table>
</a> </li>
<li> <a href="#nogo">
<table>
<tr>
<td><dl>
<dt><a href="#">Artech Store</a></dt>
<dd><a href="#">Books</a></dd>
<dd><a href="#">DVDs</a></dd>
<dd><a href="#">Movies</a></dd>
<dd class="last"><a href="#">Service</a></dd>
</dl></td>
</tr>
</table>
</a> </li>
<li> <a href="#nogo">
<table>
<tr>
<td><dl>
<dt><a href="#">Artech Achi</a></dt>
<dd><a href="#">Landscape</a></dd>
<dd><a href="#">Plan</a></dd>
<dd><a href="#">Design</a></dd>
<dd class="last"><a href="#">Maps</a></dd>
</dl></td>
</tr>
</table>
</a> </li>
<li> <a href="#nogo">
<table>
<tr>
<td><dl>
<dt><a href="#">Artech Science</a></dt>
<dd><a href="#">Physics</a></dd>
<dd><a href="#">Maths</a></dd>
<dd><a href="#">Chemistry</a></dd>
<dd class="last"><a href="#">Courses</a></dd>
</dl></td>
</tr>
</table>
</a> </li>
</ul>
</body>
</html>
一款比较不错的下拉菜单
2010-09-21
673
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
#menu{ margin:0; padding:0; list-style:none; font:14px Arial; }#menu li{ float:left;margin:0...
目录
相关文章
|
7月前
|
7月前
|
算法
前端开发
|
Web App开发
JavaScript
前端开发
对话框、模态框和弹出框看起来很相似，它们有何不同？
由于一个新的 popover 属性正在被提出，所以这篇文章将探讨对话框(dialogs)、弹出窗口(popovers)、叠加层(overlays)和揭示小部件(disclosure widgets)之间的区别。
26424
1
2
|
XML
Java
API
|
前端开发
开发者
热门文章
最新文章
1
阿里云SSL证书价格从免费到收费详细收费价格表
2
物联网平台场景体验小记
3
【转载】ZOL天下IT:摩卡北塔抄袭门（243期）
4
js时钟（秒）
5
Android -- MeasureSpec
6
Struts2.5使用通配符的方式实现动态方法调用报错
7
poj 2562 Primary Arithmetic
8
HTML5网站大观：15个精美的 HTML5 单页网站作品欣赏
9
网站性能优化之应用程序缓存-初篇
10
[IDA] 分析for循环的汇编代码
1
如何精准做到合同到期后不再发生业务？还是邻家系统做得真好！
12
2
清华大学104页PPT《DeepSeek从入门到精通》分享
43
3
【01】Cocos游戏开发引擎从0开发一款游戏-cocos环境搭建以及配置-Cocos Creator软件系统下载安装-node环境-优雅草卓伊凡
15
4
对话｜企业如何构建更完善的容器供应链安全防护体系
17
5
Redis应用—1.在用户数据里的应用
13
6
云数据库实战：基于阿里云RDS的Python应用开发与优化
15
7
云数据库：从零到一，构建高可用MySQL集群
11
8
2025年阿里云用户安全体检通知：免费权益，一键开启
17
9
基于MPPT最大功率跟踪的离网光伏发电系统Simulink建模与仿真
10
10
DeepSeek 满血版在 IDEA 中怎么用？手把手教程来了
20