js实现悬停下拉菜单，这个是前端面试中遇到的场景题，原理就是修改菜单样式的display属性的属性值从none=>block，具体实现见下，重点关注下面几个部分。 给
js实现悬停下拉菜单，这个是前端面试中遇到的场景题，原理就是修改菜单样式的display属性的属性值从none=>block，具体实现见下，重点关注下面几个部分。
<!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>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: black;
}
li {
list-style: none;
}
.container {
margin: 50px auto;
width: 40%;
height: 40px;
display: flex;
justify-content: space-evenly;
background-color: skyblue;
}
.section {
float: left;
font-size: 16px;
line-height: 40px;
text-align: center;
}
.section:hover .head {
color: white;
background-color: orange;
}
.menu {
display: none;
background-color: transparent;
}
.section:hover .menu {
display: block;
}
.menu li:hover {
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="section">
<a href="#" class="head">写论文</a>
<ul class="menu">
<li>查资料</li>
<li>记笔记</li>
<li>复现</li>
</ul>
</div>
<div class="section">
<a href="#" class="head">学前端</a>
<ul class="menu">
<li>HTML</li>
<li>CSS</li>
<li>javascript</li>
<li>LeetCode</li>
</ul>
</div>
<div class="section">
<a href="#" class="head">小日子</a>
<ul class="menu">
<li>吃饭</li>
<li>睡觉</li>
<li>打豆豆</li>
</ul>
</div>
</div>
</body>
</html>最终效果如下。
Tips：另外还有个类似的题目是点击实现下拉菜单，这个不一样的是要添加点击事件，在JS里写，之后再补充。也可以选择将三个section写作ul li的形式，这样嵌套两层ul也可以实现，语义更好，留给读者参考。
--结束END--
本文标题: 原生JS实现悬停下拉菜单
本文链接: https://lsjlt.com/news/135864.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0