纯CSS下拉菜单代码,IE浏览器测试通过

发布时间：2018-08-21 04:00:26 所属栏目：政策来源：站长网

导读：关于二级下拉菜单，也许您见过许多，不过可能都是javascript的吧，今天让我们一起来看一款使用纯CSS实现下拉菜单，这在烈火网旧版风格中就有，请看这里。看完了吧，下面再看看本文中我们说的一个特效菜单吧。本款完全是用CSS实现，没有任何的 Java Script

　　关于二级下拉菜单，也许您见过许多，不过可能都是javascript的吧，今天让我们一起来看一款使用纯CSS实现下拉菜单，这在烈火网旧版风格中就有，请看这里。看完了吧，下面再看看本文中我们说的一个特效菜单吧。

　　本款完全是用CSS实现，没有任何的JavaScript代码，兼容性方面在IE8、IE7下没问题，IE6和火狐下尚未测试。

　　网页版：猛击这里

　　运行版：

<!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=GBK" /> <title>纯CSS下拉菜单 - Liehuo.Net</title> <style type="text/css"> .navigation { margin:0; padding:0; width:610px; list-style-type:none; font:12px Arial; float:left; } .navigation li { float:left; padding:0; margin:0 10px 0 0; _margin:0 2px 0 0; width:150px; } /* 选单区块*/ .navigation li dl { width:150px;/*ie6*/ margin:0; padding:0; background-color:#fff; border:solid 2px #666; } .navigation li dt a , .navigation li dd a{ display:block;} /* 主选单dt */ .navigation li dt { margin:0; padding: 5px; text-align:center; background-color:#fff; font-size: 12px; font-weight: bold; height:15px; overflow:hidden; } .navigation li dt a ,.navigation li dt a:visited { display:block; color:#333; text-decoration:none; } /* 子选单dd */ .navigation li dd { margin:0; padding:0; color: #333; background-color:#efefef; border-bottom:dotted 1px #666; } .navigation li dd.last { border-bottom:0; } .navigation li dd a, .navigation li dd a:visited { display:block; color:#333; text-decoration:none; padding:4px 5px 4px 20px; } /*隐藏子选单*/ .navigation li dd { display:none;} /* 滑鼠滑入显示子选单 */ .navigation li:hover dd, .navigation li a:hover dd { display:block;} /*ie6 hack*/ .navigation li:hover,.navigation li a:hover { border:0;} .navigation table { border-collapse:collapse; padding:0; text-align:left; } </style> </head> <body> <ul class="navigation"> <li>  <dl> <dt><a href="http://www.veryhuo.com">烈火学院</a></dt> <dd><a href="#">网站首页</a></dd> <dd><a href="http://www.veryhuo.com/a/">最新更新</a></dd> <dd class="last"><a href="http://www.veryhuo.com/news/">IT 新闻</a></dd> </dl>  </li> <li>  <dl> <dt><a href="#">Photoshop</a></dt> <dd><a href="#">Macromedia</a></dd> <dd class="last"><a href="#">Microsoft</a></dd> </dl> </li>  <li>  <dl> <dt><a href="#"><b>jQuery</b></a></dt> <dd><a href="#">Prototype</a></dd> <dd class="last"><a href="#">辅助工具</a></dd> </dl>  </li> </ul> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：上饶站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!