<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>*{margin: 0;padding: 0;}#menu{background-color: purple;width: 100%;height: 50px;}.item{float: left;width: 100px;height: 50px;line-height: 50px;/* border: 1px solid red; */text-align: center;color: white;position: relative;} .item:hover{background-color: red;}#container{width: 720px;margin: auto;}.down_menu{display: none;position: absolute;}.item:hover > .down_menu{background-color: #cccccc;display: block;color: black;left: 20px;}</style></head><body><div id="menu"><div id="container"><div class="item">game1<div class="down_menu"><div>xiazai</div><div>jiaoyi</div><div>waigua</div><div>gonglv</div></div></div><div class="item">game2<div class="down_menu"><div>xiazai</div><div>jiaoyi</div><div>waigua</div><div>gonglv</div></div></div><div class="item">game3<div class="down_menu"><div>xiazai</div><div>jiaoyi</div><div>waigua</div><div>gonglv</div></div></div><div class="item">game4<div class="down_menu"><div>xiazai</div><div>jiaoyi</div><div>waigua</div><div>gonglv</div></div></div> <div class="item">game5<div class="down_menu"><div>xiazai</div><div>jiaoyi</div><div>waigua</div><div>gonglv</div></div></div><div class="item">game6<div class="down_menu"><div>xiazai</div><div>jiaoyi</div><div>waigua</div><div>gonglv</div></div></div></div></div></body>
</html>效果图
