<!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=gb2312" /> <title>精美Css+Xhtml下拉菜单</title> <link href="style/style.css" rel="stylesheet" type="text/css" /> </head> <body> <h3>本实例不支持IE6.0，抛弃IE6.0从现在做起</h3> <div id="nav"> <ul> <li>我的首页 <ul> <li><a href="#">我的Png</a></li> <li><a href="#">我的Gif</a></li> <li><a href="#">我的酷站</a></li> <li><a href="#">我的日志</a></li> <li><a href="#">我的相册</a></li> <li><a href="#">我的收藏</a></li> </ul> </li> <li>我的首页 <ul> <li><a href="#">我的Png</a></li> <li><a href="#">我的Gif</a></li> <li><a href="#">我的酷站</a></li> <li><a href="#">我的日志</a></li> <li><a href="#">我的相册</a></li> <li><a href="#">我的收藏</a></li> </ul> </li> <li>我的首页 <ul> <li><a href="#">我的Png</a></li> <li><a href="#">我的Gif</a></li> <li><a href="#">我的酷站</a></li> <li><a href="#">我的日志</a></li> <li><a href="#">我的相册</a></li> <li><a href="#">我的收藏</a></li> </ul> </li> <li>我的首页 <ul> <li><a href="#">我的Png</a></li> <li><a href="#">我的Gif</a></li> <li><a href="#">我的酷站</a></li> <li><a href="#">我的日志</a></li> <li><a href="#">我的相册</a></li> <li><a href="#">我的收藏</a></li> </ul> </li> </ul> </div> </body> </html>
CSS文件
body { background:#fff; font-size:12px; } h3 { text-align:center; } ul { margin:0; padding:0; list-style:none; } #nav > ul > li { width:120px; border:1px solid #eee; background:#fafafa; padding:4px 0; margin:10px; text-align:center; color:#999; cursor:pointer; position:relative; float:left; } #nav > ul > li:hover { background:#F1FBEC; border:1px solid #9CDD75; border-bottom:none; color:#666; } #nav > ul > li > ul { border:1px solid #9CDD75; border-top:none; background:#F1FBEC; position:absolute; top:21px; left:-1px; display:none; } #nav > ul > li > ul li { width:120px; padding:4px 0; } #nav > ul > li > ul li a { color:#666; text-decoration:none; display:inline-block; width:100px; padding:4px 0; } #nav > ul > li > ul li a:hover { color:#333; font-weight:bold; background:lightgreen; } #nav > ul > li:hover ul { display:block; }