css 设置鼠标覆盖显示菜单

在这里插入图片描述
鼠标覆盖到“全部分类”效果如下

鼠标放到“精品推荐”效果如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0px;padding: 0px;}#main{width: 450px;height: 500px;background-color: antiquewhite;margin: 0 auto;}.nav{width: 100px;height: 30px;position: relative;display: none;}a{text-decoration: none;color: black;}/* 设置列表 */.nav_list{width: 180px;background-color: rgb(246, 248, 248);float: left;position: absolute;top: 0px;margin-left: 90px;display: none;}.nav_list ul li{list-style: none;float: left;margin-right: 10px;margin-bottom: 10px;}.nav:hover .nav_list{display: block;}.nav:hover{background-color: rgb(246, 248, 248);}#protect_list{width: 1180px;height:50px;background-color: azure;}#protect_list:hover .nav{display: block;}</style>
</head>
<body><div id="main"><div id="protect_list"><h2>全部分类</h2><div class="nav"><h3>精品推荐</h3><div class="nav_list"><ul><li><a href="#">精品推荐1</a></li><li><a href="#">精品推荐2</a></li><li><a href="#">精品推荐3</a></li><li><a href="#">精品推荐4</a></li><li><a href="#">精品推荐5</a></li><li><a href="#">精品推荐6</a></li></ul></div></div><div class="nav"><h3>精品推荐</h3><div class="nav_list"><ul><li><a href="#">精品推荐1</a></li><li><a href="#">精品推荐2</a></li><li><a href="#">精品推荐3</a></li><li><a href="#">精品推荐4</a></li><li><a href="#">精品推荐5</a></li><li><a href="#">精品推荐6</a></li></ul></div></div><div class="nav"><h3>精品推荐</h3><div class="nav_list"><ul><li><a href="#">精品推荐1</a></li><li><a href="#">精品推荐2</a></li><li><a href="#">精品推荐3</a></li><li><a href="#">精品推荐4</a></li><li><a href="#">精品推荐5</a></li><li><a href="#">精品推荐6</a></li></ul></div></div><div class="nav"><h3>精品推荐</h3><div class="nav_list"><ul><li><a href="#">精品推荐1</a></li><li><a href="#">精品推荐2</a></li><li><a href="#">精品推荐3</a></li><li><a href="#">精品推荐4</a></li><li><a href="#">精品推荐5</a></li><li><a href="#">精品推荐6</a></li></ul></div></div><div class="nav"><h3>精品推荐</h3><div class="nav_list"><ul><li><a href="#">精品推荐1</a></li><li><a href="#">精品推荐2</a></li><li><a href="#">精品推荐3</a></li><li><a href="#">精品推荐4</a></li><li><a href="#">精品推荐5</a></li><li><a href="#">精品推荐6</a></li></ul></div></div><div class="nav"><h3>精品推荐</h3><div class="nav_list"><ul><li><a href="#">精品推荐1</a></li><li><a href="#">精品推荐2</a></li><li><a href="#">精品推荐3</a></li><li><a href="#">精品推荐4</a></li><li><a href="#">精品推荐5</a></li><li><a href="#">精品推荐6</a></li></ul></div></div><div class="nav"><h3>精品推荐</h3><div class="nav_list"><ul><li><a href="#">精品推荐1</a></li><li><a href="#">精品推荐2</a></li><li><a href="#">精品推荐3</a></li><li><a href="#">精品推荐4</a></li><li><a href="#">精品推荐5</a></li><li><a href="#">精品推荐6</a></li></ul></div></div><div class="nav"><h3>精品推荐</h3><div class="nav_list"><ul><li><a href="#">精品推荐1</a></li><li><a href="#">精品推荐2</a></li><li><a href="#">精品推荐3</a></li><li><a href="#">精品推荐4</a></li><li><a href="#">精品推荐5</a></li><li><a href="#">精品推荐6</a></li></ul></div></div><div class="nav"><h3>精品推荐</h3><div class="nav_list"><ul><li><a href="#">精品推荐1</a></li><li><a href="#">精品推荐2</a></li><li><a href="#">精品推荐3</a></li><li><a href="#">精品推荐4</a></li><li><a href="#">精品推荐5</a></li><li><a href="#">精品推荐6</a></li></ul></div></div></div></div>
</body>
</html>