<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>mo ni test</title>
</head>
<link href="css/test.css" type="text/css" rel="stylesheet" />
<body>
<div class="menu" style="margin:0 auto;">
<ul>
<li class="u-l"><a href="#">item1</a>
<ul>
<li><a href="#">item1-1</a></li>
<li><a href="#">item1-2</a></li>
<li><a href="#">item1-3</a></li>
</ul>
</li>
<li class="u-l"><a href="#">item2</a>
<ul>
<li><a href="#">item2-1</a></li>
<li><a href="#">item2-2</a></li>
<li><a href="#">item2-3</a></li>
</ul>
</li>
<li class="u-l"><a href="#">item3</a>
<ul>
<li><a href="#">item3-1</a></li>
<li><a href="#">item3-2</a></li>
<li><a href="#">item3-3</a></li>
</ul>
</li>
<li class="u-l"><a href="#">item4</a>
<ul>
<li><a href="#">item4-1</a></li>
<li><a href="#">item4-2</a></li>
</ul>
</li>
</ul>
</div>
<div id="main"></div>
</body>
</html>
==========================================test.css==========================================
body {
background: #fff;
font-family: "Lucida Grande", Helvetica, Arial, sans-serif;
font-size: 12px;
}
/* style the outer div to give it width */
.menu {
font-size:12px;
width:700px;
border: 1px solid blue;
position: relative;
}
.menu ul
{
list-style: none;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.menu ul .u-l
{ width: 120px;
height: 30px;
list-style: none;
padding: 0px;
text-align: center;
float: left;
border-right: 1px solid #CCCCCC;
margin-right: 1px;
background: url("../images/top_grad.gif") repeat scroll center center;
}
.menu ul ul li
{
display: block;
width: 150px;
height: 20px;
list-style: none;
border-top: 1px solid #77AAAA;
margin:1px;
padding: 0px;
text-align: center;
background: url("../images/sub_grad.gif") repeat scroll center center;
}
.menu ul ul
{
visibility: hidden;
position: absolute;
top:30px;
z-index: 99;
}
.menu .u-l:hover ul
{
visibility: visible;
}
#main
{
width: 700px;
height: 300px;
background-color: red;
margin:0px auto;
}