DIV+CSS实现二级菜单

DIV+CSS实现二级菜单

在网页制作中我们经常会用到的这样的导航栏+二级菜单布局 实现效果如下：

设计思路就是通过 ul li 的双重嵌套来实现二级菜单，l利用display:none将二级菜单默认隐藏，li:hover鼠标悬浮时再将其显示出来。
需要注意的是：
1.需要清除掉网页的原始属性 以防止二级菜单错位*{margin:0;padding:0;}
2.在一级菜单中使用display: block; float:left 使其横向显示
3.使用绝对对位 然后使二级菜单默认隐藏position:absolute;display:none;
4.使用display: block;将二级菜单显示为独占一行
5.在二级菜单中需要将浮动清除float:none
6.设置二级菜单的宽度与一级同宽 使其显示正常

实现非常简单 具体代码如下：
1.HTML部分

<div class="nav">
			<ul>
				<li>
					首页
				</li>
				<li>
					CSS布局与定位
					<div class="droplist">
						<ul>
							<li><a href="1. CSS布局与定位/1.1 盒子模型Ⅰ.html">盒子模型Ⅰ</a></li>
							<li><a href="1. CSS布局与定位/1.2 盒子模型Ⅱ.html">盒子模型Ⅱ</a></li>
							<li><a href="1. CSS布局与定位/1.3 CSS定位机制.html">CSS定位机制</a></li>
							<li><a href="1. CSS布局与定位/1.4 文档流定位.html">文档流定位</a></li>
							<li><a href="1. CSS布局与定位/1.5 浮动定位.html">浮动定位</a></li>
							<li><a href="1. CSS布局与定位/1.6 层定位.html">层定位</a></li>
							<li><a href="1. CSS布局与定位/1.7 弹性盒子布局.html">弹性盒子布局</a></li>
							<li><a href="1. CSS布局与定位/1.8 网格布局.html">网格布局</a></li>
							<li><a href="1. CSS布局与定位/网格布局案例.html">网格布局案例</a></li>
						</ul>
					</div>
				</li>
				<li>
					CSS3
					<div class="droplist">
						<ul>
							<li><a class="2. CSS3/2.1 圆角边框与阴影.html">圆角边框与阴影</a></li>
							<li><a href="2. CSS3/2.2 文字与文本.html">文字与文本</a></li>
							<li><a href="2. CSS3/2.3 2D变换.html">2D变换</a></li>
							<li><a href="2. CSS3/2.4 过渡与动画.html">过渡与动画</a></li>
							<li><a href="2. CSS3/2.5 3D变换.html">3D变换</a></li>
						</ul>
					</div>
				</li>
				
				<li>
					CSS综合案例
					<div class="droplist">
						<a href="3. CSS综合案例/3D翻转.html">3D翻转</a>
					</div>
				</li>
			</ul>
		</div>

这里将导航栏部分整体放置在一个flexbox中，以便于后期其他部分的编辑。用div做二级菜单的容器便于调整。

2.CSS部分

			*{
				margin: 0;
				padding: 0;
			}
			.nav{
				background-color: #333;
				display: flex;
			}
			.droplist{
				display: none;
				background-color: #333;
				position: absolute;
				float: none;
				width: 200px;
			}
			li:hover .droplist{
				display: block;
			}
			ul a{
				color: white;
				list-style-type: none;
				overflow: hidden;
				text-decoration: none;
			}
			li{
				list-style-type: none;
				display: block;
				float: left;
				width: 200px;
				height: 60px;
				line-height: 60px;
				text-align: center;
				color: white;
				cursor: pointer;
			}
			li:hover{
				background-color: #111;
			}

代码块中没有写注释，可以在评论区中讨论！祝大家五一快乐！