- 3/5
- 1
- 2
- 3
- 4
- 5
织梦DedeCMS视频教程买空间 租服务器 选网硕互联！ 无忧站长工具,百度权重一键全查!
这是一个标准的CSS下拉菜单制作教程，有针对目前流行的IE6/IE7/IE8不同版本的CSS代码，因此可以在IE之间完全兼容，不过其它的浏览器像火狐/GG浏览器之类的没有测试，如果兼容IE8的话，那么兼容火狐应该问题不大吧。菜单使用蓝色基调，滑向二级菜单更换背景，操作的感觉很舒服。
<!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" mrc="text/html; charset=UTF-8"> <title>纯css下拉菜单</title> <!--[if IE 7]><!--> <style> body { font-family:verdana, sans-serif; font-size:small; } #navigation , #navigation li ul{ padding:0; margin:0; list-style-type: none; } #navigation li { float:left; text-align:center; position:relative; } #navigation li h3 { margin:0; } #navigation li a:link, #navigation li a:visited { display:block; text-decoration:none; color:#000; width:120px; height:40px; line-height:40px; border:1px solid #fff; border-width:1px 1px 0 0; background:#c5dbf2; padding-left:10px; } #navigation li ul { display: none; } table { margin:-1px; border-collapse:collapse; } /* 以下只支持非IE6浏览器 */ #navigation li:hover a { color:#fff; background:#2687eb; } #navigation li:hover ul { display:block; position:absolute; top:40px; margin-top:1px; left:0; width:120px; } #navigation li:hover ul li a { display:block; background:#c5dbf2; color:#000; height:20px; line-height:20px; padding:5px 10px; width:110px; } #navigation li:hover ul li a:hover { color:#fff; background:#6b839c; } </styel> <!--<![endif]--> <!--[if lte IE 6]> <style> BODY { FONT-SIZE: small; FONT-FAMILY: verdana, sans-serif } #navigation { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } #navigation LI UL { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none } #navigation LI { FLOAT: left; POSITION: relative; TEXT-ALIGN: center } #navigation LI H3 { MARGIN: 0px } #navigation LI A:link { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #c5dbf2; BORDER-LEFT: #fff 0px solid; WIDTH: 120px; COLOR: #000; LINE-HEIGHT: 40px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 40px; TEXT-DECORATION: none } #navigation LI A:visited { BORDER-RIGHT: #fff 1px solid; BORDER-TOP: #fff 1px solid; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #c5dbf2; BORDER-LEFT: #fff 0px solid; WIDTH: 120px; COLOR: #000; LINE-HEIGHT: 40px; BORDER-BOTTOM: #fff 0px solid; HEIGHT: 40px; TEXT-DECORATION: none } #navigation LI UL { DISPLAY: none } TABLE { MARGIN: -1px; BORDER-COLLAPSE: collapse } #navigation LI A:hover { BACKGROUND: #2687eb; COLOR: #fff } #navigation LI A:hover UL { MARGIN-TOP: 1px; DISPLAY: block; LEFT: 0px; WIDTH: 120px; POSITION: absolute; TOP: 40px } #navigation LI A:hover UL LI A { PADDING-RIGHT: 10px; DISPLAY: block; PADDING-LEFT: 10px; BACKGROUND: #c5dbf2; PADDING-BOTTOM: 5px; WIDTH: 110px; COLOR: #000; LINE-HEIGHT: 20px; PADDING-TOP: 5px; HEIGHT: 20px } #navigation LI A:hover UL LI A:hover { BACKGROUND: #6b839c; COLOR: #fff } </style> <![endif]--> </head> <body> <ul id="navigation"> <li> <a href="http://www.mb5u.com">模板无忧 <!--[if IE 7]><!--> </a> <!--<![endif]--> <table><tbody><tr><td> <ul> <li><a href="#">最新更新</a></li> <li><a href="#">网页特效</a></li> </ul> </td></tr></tbody></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li> <a href="#">源码资源<!--[if IE 7]><!--> </a> <!--<![endif]--> <table><tbody><tr><td> <ul> <li><a href="#">ASP</a></li> <li><a href="#">PHP</a></li> <li><a href="#">AJAX</a></li> </ul> </td></tr></tbody></table> <!--[if lte IE 6]> </a> <![endif]--> </li> <li> <a href="#">网页特效<!--[if IE 7]><!--> </a> <!--<![endif]--> <table><tbody><tr><td> <ul> <li><a href="#">导航</a></li> <li><a href="#">布局</a></li> <li><a href="#">表单</a></li> </ul> </td></tr></tbody></table> <!--[if lte IE 6]> </a> <![endif]--> </li> </ul> </body></html>