[分享]忙活了半天的纯CSS仿经典下拉菜单

xcgh

浏览: 77352 次
来自: ...

最近访客更多访客>>

yaping0728

cqwb123

影子yingzi

huaiyong

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

CSS Firefox F#软件测试浏览器

分享忙活了半天的纯CSS仿经典下拉菜单：
目前只实现了第一级。
二级，三级还在伤脑筋ing...

测试地址：http://pysj.v-ec.com/model/Css%20Menu/CssMenu.htm

代码：
<style>
* {margin:0px;font-size:12px;background:#D4D0C8;color:#000000;}
hr {color:gray;border:1px inset;}
#dyMenu {width:100%;background:#D4D0C8;border:2px outset;}
#dyMenu a {display:block;width:60px;display:inline;text-decoration:none;cursor:default;}
#dyMenu a:hover {background:#2C3D43;}
#dyMenu table {width:60px;padding:0px;}
#dyMenu td.main {text-align:center;padding:3px 0px 2px 0px;cursor:default;height:22px;}
#dyMenu a:hover td.main {border:1px inset;}
#dyMenu a div {display:none;}
#dyMenu a:hover div {display:block;position:absolute;border:2px outset;}
#dyMenu a div a {background:#D4D0C8;width:250px;padding:2px 0px 2px 3px;}
#dyMenu a div a span.thr {width:6%;}
#dyMenu a div a span.for {width:6%;background:url('blackRight.gif') center center no-repeat;}
#dyMenu a div a span {width:10%;}
#dyMenu a div a span.sub {width:10%;background:url('files.gif') left top no-repeat;}
#dyMenu a div a i {font-style:normal;width:72%;padding:0px;}
#dyMenu a div a i.sub {font-style:normal;width:68%;padding:0px;}
#dyMenu a div a b {font-weight:normal;width:16%;}
#dyMenu a div a em {font-style:normal;width:5%;background:url('blackPoint.gif') left center no-repeat;}
#dyMenu a div a:hover {background:#0A246A;color:#ffffff;}
#dyMenu a div a:hover span.thr {width:6%;background:#0A246A;}
#dyMenu a div a:hover span.for {width:6%;background:url('whiteRight.gif') center center no-repeat;}
#dyMenu a div a:hover span {width:10%;background:#0A246A;}
#dyMenu a div a:hover span.sub {width:10%;background:#0A246A;background:url('files.gif') left top no-repeat;}
#dyMenu a div a:hover i {font-style:normal;width:72%;background:#0A246A;color:#ffffff;padding:0px;}
#dyMenu a div a:hover i.sub {font-style:normal;width:68%;background:#0A246A;color:#ffffff;padding:0px;}
#dyMenu a div a:hover b {font-weight:normal;width:16%;background:#0A246A;color:#ffffff;}
#dyMenu a div a:hover em {font-style:normal;width:5%;background:#0A246A;color:#ffffff;background:url('whitePoint.gif') left center no-repeat;}
</style>

<div id="dyMenu">
<a href="#">
 <table cellspacing="0">
 <tr><td class="main">文件(F)</td></tr>
 <tr><td>
 <div>
 <a href="#">新建(N)</a>
 <a href="#">打开(O)...Ctrl+O</a>
 <a href="#">使用记事本编辑(D)</a>
 <a href="#" disabled>保存(S)Ctrl+S</a>
 <a href="#">另存为(A)...</a><hr>
 <a href="#">页面设置(U)...</a>
 <a href="#">打印(P)...Ctrl+P</a>
 <a href="#">打印预览(V)...</a><hr>
 <a href="#">发送(E)</a>
 <a href="#">导入和导出(I)...</a><hr>
 <a href="#">属性(R)</a>
 <a href="#">关闭(C)</a>
 </div>
 </td></tr>
 </table>
</a>
<a href="#">
 <table cellspacing="0">
 <tr><td class="main">编辑(E)</td></tr>
 <tr><td>
 <div>
 <a href="#" disabled>剪切Ctrl+X</a>
 <a href="#" disabled>复制Ctrl+C</a>
 <a href="#" disabled>粘贴Ctrl+V</a><hr>
 <a href="#">全选(A)Ctrl+A</a><hr>
 <a href="#">查找(在当前页)(F)...Ctrl+F</a>
 </div>
 </td></tr>
 </table>
</a>
<a href="#">
 <table cellspacing="0">
 <tr><td class="main">查看(V)</td></tr>
 <tr><td>
 <div>
 <a href="#">工具栏(T)</a>
 <a href="#">状态栏(B)</a>
 <a href="#">浏览器栏(E)</a><hr>
 <a href="#">转到(O)</a>
 <a href="#">停止(P)Esc</a>
 <a href="#">刷新(R)F5</a><hr>
 <a href="#">文字大小(X)</a>
 <a href="#">编码(D)</a><hr>
 <a href="#">源文件(C)</a>
 <a href="#" disabled>隐私报告(V)...</a>
 <a href="#">全屏显示(F)F11</a>
 </div>
 </td></tr>
 </table>
</a>
<a href="#">
 <table cellspacing="0">
 <tr><td class="main">收藏(A)</td></tr>
 <tr><td>
 <div>
 <a href="#">添加到收藏夹(A)...</a>
 <a href="#">整理收藏夹(O)...</a><hr>
 <a href="#">链接</a>
 <a href="#">软件在载</a>
 </div>
 </td></tr>
 </table>
</a>
<a href="#">
 <table cellspacing="0">
 <tr><td class="main">工具(T)</td></tr>
 <tr><td>
 <div>
 <a href="#">邮件和新闻(M)</a>
 <a href="#">弹出窗口阻止程序(P)</a>
 <a href="#">管理加载项(A)...</a>
 <a href="#">同步(S)...</a>
 <a href="#">Window Update(U)</a><hr>
 <a href="#">Internet 选项(O)...</a>
 </div>
 </td></tr>
 </table>
</a>
<a href="#">
 <table cellspacing="0">
 <tr><td class="main">帮助(H)</td></tr>
 <tr><td>
 <div>
 <a href="#">目录和索引(C)</a>
 <a href="#">每日提示(D)</a>
 <a href="#">Netscape 用户(N)</a>
 <a href="#">联机支持(S)</a>
 <a href="#">发送反馈意见(K)</a><hr>
 <a href="#/">关于 Internet Explorer(A)</a>
 </div>
 </td></tr>
 </table>
</a>
</div>

分享到：

帮别人搬程序 | 长文章自动分页类

2006-11-28 17:18
浏览 2207
评论(2)
查看更多

2 楼星冰艳月 2010-07-16

没用DOCTYPE标签....
后果很严重

1 楼 ritchie 2006-11-28

不支持firefox..

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论