模拟二级菜单
HTML部分：
<!DOCTYPE html>: 声明文档类型为HTML5。<html>: HTML文档的根元素。<head>: 包含文档的元数据，如字符集、标题和样式。<meta charset="utf-8">: 设置文档的字符编码为UTF-8。<title>: 定义文档的标题，显示在浏览器标签页上。<style>: 包含 CSS 样式，用于定义网页的布局和外观。
<body>: 包含网页的所有内容。<div class="menu">: 一个容器，包含所有的菜单项。<div class="item">: 菜单项，每个菜单项都有一个文本标题。<div class="nav">: 二级菜单，包含链接和图片。<a href=""><img src="" alt="" width="40">城市名称</a>: 超链接，包含图片和文本，点击后可以跳转到指定页面。这里为空，可自行补充。
CSS部分：
body选择器: 设置整个页面的背景渐变，从天蓝色到白色。a选择器: 去除超链接的下划线。.menu类选择器: 设置主菜单的宽度、高度、背景颜色、边距和位置。.menu .item类选择器: 设置菜单项的高度、颜色、字体大小、行高、内边距和背景图片。.menu .item:hover伪类选择器: 当鼠标悬停在菜单项上时，改变背景颜色和背景图片。.menu .item .nav类选择器: 设置二级菜单的宽度、高度、背景颜色、边框、位置、内边距和显示方式（默认为隐藏）。.item .nav a类选择器: 设置二级菜单中链接的颜色和布局。.item .nav a img类选择器: 设置图片与文本的间隔。.item .nav a:hover伪类选择器: 当鼠标悬停在链接上时，改变文本颜色。.item:hover .nav伪类选择器: 当鼠标悬停在菜单项上时，显示二级菜单。
这个网页布局创建了一个具有二级菜单的主菜单，当用户将鼠标悬停在某个省份的菜单项上时，会显示该省份下的一系列城市链接。
源码
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>模拟二级菜单</title>
<style type="text/css">
body {
margin: 0;
padding: 0;
background-image: linear-gradient(to right, skyblue, #fff);
}
a {
text-decoration: none;
}
.menu {
width: 230px;
height: 420px;
padding: 20px 0;
background-color: rgba(0, 0, 0, 0.5);
margin: 50px 0 0 50px;
position: relative;
}
.menu .item {
height: 42px;
/* border: 1px solid red; */
color: #fff;
font-size: 14px;
line-height: 42px;
padding-left: 30px;
background: url('images/right-jiantou.png') no-repeat 200px 10px;
cursor: pointer;
}
.menu .item:hover {
background-color: #ff6700;
background-image: url('images/right-jiantou2.png');
}
/* 右侧二级菜单 */
.menu .item .nav {
min-width: 250px;
height: 460px;
background-color: #fff;
border: 1px solid #666;
position: absolute;
top: 0;
left: 100%;
box-sizing: border-box;
/* 六行单元格平分整个区域 */
display: grid;
grid-template-rows: repeat(6, 1fr);
grid-template-columns: 250px;
/* 排列方式设置为先列后行 */
grid-auto-flow: column;
/* 设置隐式网格宽度 */
grid-auto-columns: 250px;
padding: 20px;
/* 初始默认隐藏 */
display: none;
}
.item .nav a {
/* border: 1px solid red; */
color: #000;
display: flex;
/* 垂直方向居中对齐,防止随父元素高度而被拉伸 */
align-items: center;
}
.item .nav a img {
margin-right: 10px;
}
.item .nav a:hover {
color: #ff6700;
}
.item:hover .nav {
display: grid;
}
</style>
</head>
<body>
<div class="menu">
<div class="item">安徽
<div class="nav">
<!-- href="" 这里可以存放自定义地址； img src="" 这里可以存放自定义图片 -->
<a href=""><img src="" alt="" width="40">合肥</a>
<a href=""><img src="" alt="" width="40">芜湖</a>
<a href=""><img src="" alt="" width="40">蚌埠</a>
<a href=""><img src="" alt="" width="40">阜阳</a>
<a href=""><img src="" alt="" width="40">滁州</a>
<a href=""><img src="" alt="" width="40">六安</a>
<a href=""><img src="" alt="" width="40">安庆</a>
<a href=""><img src="" alt="" width="40">池州</a>
<a href=""><img src="" alt="" width="40">宿州</a>
<a href=""><img src="" alt="" width="40">淮南</a>
</div>
</div>
<div class="item">江苏
<div class="nav">
<a href=""><img src="" alt="" width="40">南京</a>
<a href=""><img src="" alt="" width="40">南通</a>
<a href=""><img src="" alt="" width="40">苏州</a>
<a href=""><img src="" alt="" width="40">徐州</a>
<a href=""><img src="" alt="" width="40">常州</a>
<a href=""><img src="" alt="" width="40">无锡</a>
</div>
</div>
<div class="item">浙江
<div class="nav">
<a href=""><img src="" alt="" width="40">金华</a>
<a href=""><img src="" alt="" width="40">杭州</a>
<a href=""><img src="" alt="" width="40">余杭</a>
<a href=""><img src="" alt="" width="40">萧山</a>
</div>
</div>
<div class="item">河南</div>
<div class="item">山东</div>
<div class="item">山西</div>
</div>
</body>
</html>