导航栏设计
<!DOCTYPE html>
<html lang="zh">
<head>
<title>task</title>
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.triangle-down, .triangle-up{
width:0;
height:0;
border-left:5px solid transparent;
border-right:5px solid transparent;
border-top:5px solid #ccc;
position: relative;
top: 11px;
left: 5px;
}
.triangle-up {
border-bottom:5px solid red;
top: -11px;
}
nav {
width: 100%;
height: 60px;
font-size: 14px;
}
.nav-ul {
display: flex;
align-items: flex-start;
}
.nav-ul li {
width: 100px;
line-height: 60px;
text-align: center;
background-color: #000000;
color: #fff;
}
.nav-ul .hover {
background-color: #fff;
color: red;
}
.concat-ul {
display: flex;
flex-direction: column;
align-items: center;
display: none;
}
.concat-ul li {
background-color: #fff;
color: #000;
line-height: 40px;
}
</style>
</head>
<body>
<header>
<nav>
<ul class="nav-ul">
<li>
<span>客服服务</span>
<i class="triangle-down"></i>
<ul class="concat-ul">
<li>
<img src="" alt="">
<span>联系客服</span>
</li>
<li>
<img src="" alt="">
<span>帮助中心</span>
</li>
<li>
<img src="" alt="">
<span>知识产权保护</span>
</li>
<li>
<img src="" alt="">
<span>规则中心</span>
</li>
</ul>
</li>
<li>
<span>充值服务</span>
<i class="triangle-down"></i>
</li>
</ul>
</nav>
</header>
</body>
<script type="text/javascript">
let ul = document.querySelector(".nav-ul")
let tri = document.querySelector(".triangle-down")
let lis = ul.children
console.log(lis)
for (let i = 0; i < lis.length; i++) {
lis[i].addEventListener("mouseover", function(e) {
if (lis[i].children[2]) {
lis[i].children[2].style.display = "block"
lis[i].className = "hover"
tri.className = "triangle-up"
}
})
lis[i].addEventListener("mouseout", function(e) {
if (lis[i].children[2]) {
lis[i].children[2].style.display = "none"
lis[i].className = ""
tri.className = "triangle-down"
}
})
}
</script>
</html>
