下拉菜单在页面中存在无非就是显示和隐藏的效果,鼠标滑动到标题显示下拉菜单,离开的使用关闭下拉菜单,但是在显示隐藏的时候会有一个小条件,就是控制鼠标移入移出事件的标签必须是包裹这个标题和下拉列表的,否则就会出现移入标题标签能够显示,但是移除标题标签就直接隐藏了,而我们要的效果是移入标题标签显示下拉菜单,而且移除标题标签,但是鼠标在下拉标签中,下拉菜单是显示的,所以在编写事件的时候,需要注意是由大盒子来控制里面的显示隐藏效果!!!
效果图如下:
参考代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: #f4f4f4;
}
li {
list-style: none;
}
.nav {
display: inline-block;
padding: 100px;
}
p {
display: inline-block;
font-size: 20px;
cursor: pointer;
}
ul {
display: none;
padding: 10px 0;
width: 100px;
background-color: #fff;
}
li {
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
cursor: pointer;
}
li:hover,
p:hover {
color: #ff6700;
background-color: #f4f4f4;
}
</style>
</head>
<body>
<div class="nav">
<div class="person">
<p>前端初学者</p>
<ul>
<li>消息通知</li>
<li>账号修改</li>
<li>退出登录</li>
</ul>
</div>
</div>
<script>
const person = document.querySelector('.person') //大盒子容器
const ul = document.querySelector('ul') //隐藏的下拉标签
person.onmousemove = function () {
ul.style.display = 'block'
}
person.onmouseout = function () {
ul.style.display = 'none'
}
</script>
</body>
</html>