使用html和css实现一个简单的三级菜单

原创已于 2022-07-12 14:15:40 修改 · 964 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

于 2022-07-11 14:52:59 首次发布

本文介绍了如何使用HTML和CSS创建一个三级菜单。通过相对和绝对定位，详细讲解了定位原理，包括相对定位不脱离文档流，绝对定位的参照物选择，以及定位层级的规则。并提供了完整的HTML和CSS代码示例。

三级菜单用到了绝对定位和相对定位

相对定位： position: relative;

没有脱离标准文档流
层级自动提高，会覆盖浮动元素
left:距离左边移动
right:距离右边移动
top:距离上边移动
bottom:距离下边移动

绝对定位:position: absolute;

如果祖先元素没有定位，相对于浏览器定位
如果祖先元素有定位,相对于"最近的"定位的祖先元素定位
绝对定位会脱离标准文档流，影响下边的元素
绝对定位找参照祖先元素，应该用relative
经过绝对定位的元素会变成行内块元素

层级关系：定位层级>浮动层级>标准文档流的层级

效果图：

html全部代码：

<div class="wraper">
            <ul class="nav">
                <li><a href="#">首页</a></li>
                <li><a href="#">网上工作室</a>
                    <ul class="second">
                        <li><a href="#">游客</a></li>
                        <li><a href="#">工作人员</a></li>
                        <li><a href="#">管理层</a>
                        <ul class="third">
                                <li><a href="#">普通管理层</a></li>
                                <li><a href="#">vip</a></li>
                                <li><a href="#">svip</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">交流圈</a></li>
                <li><a href="#">登录</a></li>
                <li><a href="#">注册</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </div>

css全部代码：

* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style: none;
			}

			a {
				text-decoration: none;
				color: white;
			}

			.wraper {
				width: 1250px;
				margin: 0 auto;
				background-color:dimgray;
				height: 50px;
				border: 1px solid white;
				border-radius: 20px 20px;
				/* 圆形边框 */
			}

			.wraper>ul>li {
				float: left;
				position: relative;
			}

			.nav {
				width: 1200px;
				margin: 0 auto;
			}

			.wraper ul li {
				height: 50px;
				line-height: 50px;
				width: 200px;
				background-color:dimgrey;
				text-align: center;
				font-weight: bolder;
				border-radius: 20px 20px;
                /* 圆形边框 */
			}

			.wraper ul li:nth-of-type(2) ul {
				display: none;
				/* 隐藏二级菜单*/
				position: absolute;
			}

			.wraper ul li:hover >a {
				color: darkred;
			}

			/* 鼠标悬浮字体变色 */

			.wraper ul li:nth-of-type(2):hover .second{
				display: block;
				/* 鼠标悬浮显示二级菜单*/
			}
			.third{
				position: absolute;
				top: 100px;
				left: 200px;
				display: none;
				/* 隐藏三级菜单 */
			}
			.second li:nth-of-type(3):hover ul{
				display: block;
				/* 鼠标悬浮显示三级菜单*/
			}

标签

#html #css #前端