共计 1093 个字符，预计需要花费 3 分钟才能阅读完成。
总结：悬浮一级菜单用 absolute 定位，二级用 relative
<html>
<head>
<meta charset="utf-8">
<style>
.menuDiv ul,
.menuDiv li {
list-style: none;
margin: 0px;
padding: 0px;
float: left;
}
.menuDiv>ul>li>ul {display: none;}
.menuDiv>ul>li>ul>li {float: none;}
.menuDiv>ul>li:hover ul {display: block;}
.menuDiv>ul>li>div {
width: 120px;
line-height: 40px;
background-color: #AFE;
color: black;
text-align: center;
}
.menuDiv>ul>li>div:hover {
color: #f0f;
background-color: #bcf;
}
.menuDiv>ul>li>ul>li>div {
width: 120px;
line-height: 36px;
background-color: #EFF;
color: #456;
text-align: center;
border: 1px solid #ccc;
border-top: none;
}
.menuDiv>ul>li>ul>li>div:hover {
color: #a4f;
background-color: #cdf;
}
</style>
</head>
<body>
<div class="menuDiv">
<ul>
<li>
<div> 菜单一 </div>
<ul>
<li>
<div> 列表一 </div>
</li>
<li>
<div> 列表二 </div>
</li>
<li>
<div> 列表三 </div>
</li>
</ul>
</li>
<li>
<div> 菜单二 </div>
<ul>
<li>
<div> 列表一 1 </div>
</li>
<li>
<div> 列表二 2 </div>
</li>
<li>
<div> 列表三 3 </div>
</li>
</ul>
</li>
<li>
<div> 菜单三 </div>
<ul>
<li>
<div> 列表一 </div>
</li>
<li>
<div> 列表二 </div>
</li>
<li>
<div> 列表三 </div>
</li>
</ul>
</li>
<li>
<div> 菜单四 </div>
<ul>
<li>
<div> 列表一 </div>
</li>
<li>
<div> 列表二 </div>
</li>
<li>
<div> 列表三 </div>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>`
正文完