总结：悬浮一级菜单用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>`