flex布局结合过渡 制作带嵌套导航栏

首先，html结构，注意

• 语义化标签nav
• 便于SEO使用ul li
• 带嵌套的submenu

		<nav>
			<ul class="menu">
				<li><a href="#">Home</a></li>
				<li>
					<a href="#">Products</a>
					<ul class="submenu">
						<li><a href="#">Product 1</a></li>
						<li><a href="#">Product 2</a></li>
					</ul>
				</li>
				<li><a href="#">About Us</a></li>
			</ul>
		</nav>

其次，考虑思路，就是鼠标移动上去之后显示子菜单

注意

• 二级菜单初始时肯定需要隐藏，在鼠标移动上去之后才能显示——考虑伪类:hover来确定鼠标悬浮状态，transition实现过渡效果
• 菜单不能影响下面的元素布局——子菜单必须脱标，主菜单不能脱标，占住位置

			nav {
				display: flex;
			}

			.menu {
				list-style: none;
				display: flex;
				width: 100%;
			}

			.menu li {
				/* 需要相对定位以便嵌套菜单显示 */
				position: relative;
				/* 平分空间 */
				flex: 1;
			}

			.submenu {
        /* 绝对定位以便子菜单可以悬浮在父菜单上方 */
				position: absolute; 
        /* 优化，从上到下出来 */
				transform: translate(0, -50%);
				padding: 0;
				/* 初始时隐藏子菜单 */
				opacity: 0;
				transition: all 0.5s;
			}
			/* !!鼠标移入时显示子菜单，并添加一些动画效果*/
			.menu li:hover > .submenu {
				opacity: 1;
				transform: translate(0, 0);
				background-color: white;
			}
			.submenu li {
				list-style: none;
			}

			/* 添加一些样式以美化导航栏 */
			nav a {
				text-decoration: none;
				color: black;
			}

			.main {
				background-color: pink;
				height: 200px;
			}