文章来源：http://www.zishu.cn/blogview.asp?logID=726
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DT.....tional.dtd“> <html xmlns=”http://www.w3.org/1999/xhtml“> <head> <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /> <style type=”text/css”> #menu{ margin:0; padding:0; list-style:none; font:14px Arial; } #menu li{ float:left;margin:0 1px 0 0;} #menu li dl{width:150px; padding:0 0 10px 0; background:#cb6 url(http://www.zishu.cn/attachment.....231638.jpg) no-repeat bottom left;} #menu li dt{padding:5px;text-align:center;border-bottom:1px solid #b00; background:#ed8 url(http://www.zishu.cn/attachment.....231556.jpg) no-repeat top left;} #menu li dt a,#menu li dt a:visited{display:block;color:#333;text-decoration:none;} #menu li dd{margin:0;padding:0;color:#fff;background-color:#47a;} #menu li dd.last{border-bottom:1px solid #b00;} #menu li dd a,#menu li dd a:visited{height:1em;display:block;color:#fff; text-decoration:none;padding:4px 5px 4px 20px; background:#47a url(http://www.zishu.cn/attachment.....231728.gif) no-repeat 7px 7px;} #menu li dd{display:none;} #menu li:hover dd,#menu li a:hover dd{display:block;} #menu li:hover,#menu li a:hover{width:auto} /*这句是后来加上的，如果不加会在IE6中有问题；width:auto是我随便写的，你删除后改成disploy:block或其它的内容，只要别它空就行*/ #menu li dd a:hover{ background-color:#147; color:#9cf;} #menu table{ border-collapse:collapse; padding:0; margin:-1px; font-size:1em;} </style> </head> <body> <ul id=”menu”> <li> <a href=”#nogo” mce_href=”#nogo”> <table> <tr> <td><dl> <dt><a href=”#” mce_href=”#”>Artech Studio</a></dt> <dd><a href=”#” mce_href=”#”>Web Dev</a></dd> <dd><a href=”#” mce_href=”#”>Web Design</a></dd> <dd><a href=”#” mce_href=”#”>Books</a></dd> <dd class=”last”><a href=”#” mce_href=”#”>Contact Us</a></dd> </dl></td> </tr> </table> </a> </li> <li> <a href=”#nogo” mce_href=”#nogo”> <table> <tr> <td><dl> <dt><a href=”#” mce_href=”#”>Artech Store</a></dt> <dd><a href=”#” mce_href=”#”>Books</a></dd> <dd><a href=”#” mce_href=”#”>DVDs</a></dd> <dd><a href=”#” mce_href=”#”>Movies</a></dd> <dd class=”last”><a href=”#” mce_href=”#”>Service</a></dd> </dl></td> </tr> </table> </a> </li> <li> <a href=”#nogo” mce_href=”#nogo”> <table> <tr> <td><dl> <dt><a href=”#” mce_href=”#”>Artech Achi</a></dt> <dd><a href=”#” mce_href=”#”>Landscape</a></dd> <dd><a href=”#” mce_href=”#”>Plan</a></dd> <dd><a href=”#” mce_href=”#”>Design</a></dd> <dd class=”last”><a href=”#” mce_href=”#”>Maps</a></dd> </dl></td> </tr> </table> </a> </li> <li> <a href=”#nogo” mce_href=”#nogo”> <table> <tr> <td><dl> <dt><a href=”#” mce_href=”#”>Artech Science</a></dt> <dd><a href=”#” mce_href=”#”>Physics</a></dd> <dd><a href=”#” mce_href=”#”>Maths</a></dd> <dd><a href=”#” mce_href=”#”>Chemistry</a></dd> <dd class=”last”><a href=”#” mce_href=”#”>Courses</a></dd> </dl></td> </tr> </table> </a> </li> </ul> </body> </html>
阅读(69 次)
Tags: CSS, 下拉菜单, 菜单
Post a Comment