实现简单的三级导航

最新推荐文章于 2023-08-12 13:07:06 发布

铁锅小菜炖大鹅

最新推荐文章于 2023-08-12 13:07:06 发布

阅读量1w

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/weixin_63477921/article/details/125638295

版权

<!DOCTYPE html>

<html>

<head>

<style>

* {

margin: 0;

padding: 0;

}

li {

list-style: none;

height: 30px;

cursor: pointer;

padding-left: 20px;

width: 0;

transition: 0.5s width;

box-sizing: border-box;

}

a {

width: 150px;

height: 30px;

text-decoration: none;

color: #555555;

line-height: 30px;

display: block;

}

.nav {

background-color: #057bc4;

position: relative;

}

/*第一级*/

ul {

width: 150px;

position: absolute;

background-color: #222;

}

li:hover > a {

color: white;

}

li:hover {

width: 150px;

background-color: #D00355;

}

/*第一级,第二级,第三层定位*/

.level-2,.level-3 {

left: 150px;

top:0;

display: none;

}

/*第一层第二层hover*/

.level-1 > li:hover > ul {

display: block;

}

.level-2 > li:hover > ul {

display: block;

}

.level-1 > li:nth-of-type(1) > ul {

top:0;

}

.level-1 > li:nth-of-type(2) > ul {

top:30px;

}

.level-1 > li:nth-of-type(3) > ul {

top:60px;

}

.level-2:nth-of-type(1) > li:nth-of-type(1):hover > ul {

top:0;

}

.level-2:nth-of-type(1) > li:nth-of-type(2):hover > ul {

top:30px;

}

.level-2:nth-of-type(1) > li:nth-of-type(3):hover > ul {

top:60px;

}

.level-2:nth-of-type(2) > li:nth-of-type(1):hover > ul {

top:0;

}

.level-2:nth-of-type(2) > li:nth-of-type(2):hover > ul {

top:30px;

}

.level-2:nth-of-type(2) > li:nth-of-type(3):hover > ul {

top:60px;

}

</style>

</head>

<body>

<li><a href="#">HDR电视</a></li>

<li><a href="#">K超清电视</a></li>

</ul>

</li>

<li><a href="#">壁挂式空调</a></li>

</ul>

</li>

<li><a href="#">滚筒洗衣机</a></li>

<li><a href="#">洗烘一体机</a></li>

<li><a href="#">波轮洗衣机</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li><a href="#">CPU主板</a></li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</body>

</html>