使用绝对定位和列表创建二级菜单

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用绝对定位和列表创建二级菜单</title>
    <link type="text/css" href="css/menu.css" rel="stylesheet" />
</head>
<body>
  <div id="box">
    <ul>
      <li><a href="#">菜单项1</a>
        <ul>
          <li><a href="#">菜单项11</a></li>
          <li><a href="#">菜单项12</a></li>
          <li><a href="#">菜单项13</a></li>
        </ul>
      </li>
      <li><a href="#">菜单项2</a>
        <ul>
          <li><a href="#">菜单项21</a></li>
          <li><a href="#">菜单项22</a></li>
          <li><a href="#">菜单项23</a></li>
        </ul>
      </li>
      <li><a href="#">菜单项3</a></li>
      <li><a href="#">菜单项4</a></li>
      <li><a href="#">菜单项5</a></li>
      <li class="last"><a href="#">菜单项6</a></li>
    </ul>
  </div>
</body>
</html>

css部分

div {
    font-size: 12px;
    font-family: "Microsoft YaHei";
    margin: 10px;
    text-align: center;
}
#box {
    width: 100px;
}
#box ul {
    list-style: none;
    padding: 0px;
}
#box ul li {
    position: relative;
    padding: 8px 0px 8px;
    background-color: #eee;
    line-height: 23px;
    border: solid 1px #CCC;
    border-bottom: 0px;
}
#box ul li ul {
    display: none;
    position: absolute;
    top: 0px;
    left: 100px;
    width: 100px;
}

#box ul li ul li:last-child {
    border: solid 1px #CCC;
}
#box ul li.last {
    border: solid 1px #CCC;
}
#box ul li:hover ul{
    display: block;
}
a:link {
    color: #000;
    text-decoration: none;
}
#box ul li a:hover{
    color: #f00;
    text-decoration: underline;
}