下面是编程之家 jb51.cc 通过网络收集整理的代码片段。
编程之家小编现在分享给大家,也给大家做个参考。
<!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> <title>纯CSS下拉菜单</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;} .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; } .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> <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]--> <dl> <dt><a href="#">更新总览</a></dt> <dd><a href="#">网站首页</a></dd> <dd><a href="http://www.codesc.net">网页特效</a></dd> <dd><a href="#">素材下载</a></dd> <dd class="last"><a href="#">设计素材</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> <li> <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]--> <dl> <dt><a href="#">Photoshop</a></dt> <dd><a href="#">氏量素材</a></dd> <dd class="last"><a href="#">名片素材</a></dd> </dl> </li> <!--[if lte IE 6]></td></tr></table></a><![endif]--> <li> <!--[if lte IE 6]><a href="#"><table><tr><td><![endif]--> <dl> <dt><a href="#">网页特效</a></dt> <dd><a href="#">网站菜单</a></dd> <dd class="last"><a href="#">CSS3</a></dd> </dl> <!--[if lte IE 6]></td></tr></table></a><![endif]--> </li> </ul> </body> </html>
以上是编程之家(jb51.cc)为你收集整理的全部代码内容,希望文章能够帮你解决所遇到的程序开发问题。
如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。