纯CSS下拉菜单代码,IE赏识器测试通过

发布时间：2018-08-20 17:46:34 所属栏目：创业来源：站长网

导读：关于二级下拉菜单，大概您见过很多，不外也许都是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>
提醒：可修改儿女码再运行!

（编辑：湖南网）

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

2021创业做什么好？低	香港虚拟主机，香港虚
《启航当风起时》起于	域名最网站至关重要如