<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>前端-ππ柯</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
body {
display: flex;
justify-content: center;
align-items: top;
height: 100vh;
background: url(./f2e1b579_E808514_c23a601f.jpg) no-repeat;
background-size: 100% 100%;
padding-top: 100px;
}
.nav {
width: 1200px;
height: 70px;
position: relative;
top: 0;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.5);
border-radius: 10px;
background-color: #fff;
}
.nav ul {
width: 100%;
height: 100%;
display: flex;
}
.nav ul .nav-box {
position: absolute;
bottom: 0;
left: 0;
width: calc((100%/5));
height: 10px;
border-radius: 3px;
transition: 0.5s;
}
.nav ul li {
width: 100%;
line-height: 70px;
text-align: center;
}
.nav ul li a {
color: rgb(70, 100, 180);
font: 1000 30px '优设标题黑';
display: block;
width: 100%;
height: 100%;
line-height: 70px;
}
.nav ul li .navson {
color: #fff;
display: none;
}
.navli:hover .navson {
display: block;
}
.navson li:nth-child(n) {
background: linear-gradient(rgb(123, 201, 236), rgb(124, 232, 157));
}
.navson li:not(:first-child) {
border-top: 1px dashed #ccc;
}
.nav ul li:nth-child(1):hover~.nav-box {
left: calc(100%/5*0);
background-color: rgb(250, 190, 250);
}
.nav ul li:nth-child(2):hover~.nav-box {
left: calc(100%/5*1);
background-color: rgb(116, 83, 237);
}
.nav ul li:nth-child(3):hover~.nav-box {
left: calc(100%/5*2);
background-color: rgb(74, 178, 222);
}
.nav ul li:nth-child(4):hover~.nav-box {
left: calc(100%/5*3);
background-color: rgb(100, 239, 202);
}
.nav ul li:nth-child(5):hover~.nav-box {
left: calc(100%/5*4);
background-color: rgb(171, 220, 102);
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li class="navli"><a href="#">HTML</a>
<ul class="navson">
<li>1</li>
<li>2</li>
<li>3</li>
<li>34</li>
</ul>
</li>
<li class="navli"><a href="#">CSS </a>
<ul class="navson">
<li>1</li>
<li>3</li>
<li>2</li>
<li>3</li>
</ul>
</li>
<li class="navli"><a href="#">JS</a>
<ul class="navson">
<li>3</li>
<li>3</li>
<li>3</li>
</ul>
</li>
<li class="navli"><a href="#">JQUERY</a>
<ul class="navson">
<li>44</li>
<li>44</li>
<li>44</li>
</ul>
</li>
<li class="navli"><a href="#">VUE</a>
<ul class="navson">
<li>66</li>
<li>66</li>
<li>66</li>
</ul>
</li>
<div class="nav-box"></div>
</ul>
</div>
</body>
</html>
纯[css]实现滑动跟踪导航栏+下拉列表
于 2022-10-19 20:45:33 首次发布