一款灰色风格的CSS弹出菜单，美化一般，重要是突出功能和实现方法，为CSS爱好者提供一份二级弹出菜单的样例，整体效果不错，兼容性也说得过去，高手可以继续完善。
<!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滑出菜单</title>
<style type="text/css">
<!--
div{
widht:100px;
height:auto;
}
/*弹出菜单*/
td{
border:1px solid #cceeff;/* 单元格样式 */
}
#PopUp ul{
list-style:none;
font-size:12px;
text-decoration:none;
}
#PopUp li{
float:left;
margin-right:10px;
padding:0px;
background:#ddd;
border:1px solid #ffeecc;
}
#PopUp li a{
line-height:30px;
width:100px;
display:block;
text-align:center;
text-decoration:none;
}
#PopUp li a:hover{
position:relative;
}
#PopUp li span{
display:none;
border:0px solid #cceeff;
}
#PopUp li a:hover span{
display:block;
position:absolute;
top:27px;left:-3px;
}
#PopUp li:hover,#PopUp li a:hover span,#PopUp li a:hover dt{}
#PopUp dt{
background:none;
}
#PopUp li a:hover dt a{
float:left;
background:#ddd;
margin-top:1px;
}
#PopUp li a:hover,#PopUp li a:hover dt a:hover{ /* 鼠标放上后背景样式 */
background:#ff6600;
}
-->
</style>
</head>
<body>
<div id="PopUp">
<h2>弹出菜单</h2>
<ul>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
<li>
<a href="#here">滑过我4
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li>
</ul>
</div>
<table width="900" border="1" id="PopUp">
<tr>
<td><li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li></td>
<td><li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li></td>
<td><li>
<a href="#here">滑过我
<span>
<table><tr><td>
<dl>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
<dt><a href="#m1">menu1</a></dt>
<dt><a href="#m2">menu2</a></dt>
<dt><a href="#m3">menu3</a></dt>
<dt><a href="#m4">menu4</a></dt>
<dt><a href="#m5">menu5</a></dt>
<dt><a href="#m6">menu6</a></dt>
</dl>
</td></tr></table>
</span>
</a>
</li></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</body>
</html>
