三级列表斩词如下想要直接取走

* {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
    
}

a {
    text-decoration: none;
}

            .wrapper {
                width: 100%;
                height: 40px;
                background-color: black;
            }

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

            .wrapper .nav>li {
                display: inline-block;
                float: left;
            }

            .nav li {
                width: 100px;
                height: 38px;
                margin: 0 auto;
                line-height: 38px;
                text-align: center;
            }

            .nav li a {
                color: white;

            }

            .nav li:hover {
                background-color: lightpink;

            }

            .nav>li:hover>a {
                color: gray;
            }

            .subnav {
                background-color: black;
                display: none;        <!--二级列表隐藏-->
                position: relative;
            }

            .subnav>li a {
                color: white;
            }

            .subnav>li:hover>a {
                color: gray;
            }

            .nav>li:hover .subnav {
                display: block;  <!--二级列表显示-->
            }

            .subnav .aa {
                background-color: green;
                position: absolute;
                left: 100px;
                top: 3px ;
                display: none;   <!--三级列表隐藏-->
                position: relative;
                height: 148px;
            }

            .subnav .aa li {
                width: 100px;
            }

            .nav .subnav li:nth-of-type(1):hover .aa {
                display: block;   <!--三级列表显示-->
            }

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>三级列表</title>
		<link rel="stylesheet" href="./css/common.css">
		<style>
		</style>
	</head>
	<body>
		<div class="wrapper">
			<ul class="nav">
				<li><a href="#">首页</a>
					<ul class="subnav">
						<li><a>我的账号</a>
							<ul class="aa">
								<li><a>张三522</a></li>
								<li><a>张三522</a></li>
								<li><a>张三522</a></li>
								<li><a>张三522</a></li>
							</ul>
						</li>
						<li><a>我的现金</a></li>
						<li><a>修改密码</a></li>
						<li><a>更改设置</a></li>
					</ul>
				</li>
				<li><a href="#">极速免税店</a></li>
				<li><a href="#">母婴特卖</a></li><!---->
				<li><a href="#">美妆商城</a></li>
				<li><a href="#">国际轻奢</a></li>
				<li><a href="#">品牌专场</a></li>
				<li><a href="#">合作招商</a></li>
			</ul>
		</div>
	</body>
</html>

三级列表斩词如下想要直接取走

猜你喜欢