<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.box {
position: relative;
width: 100px;
}
.first {
width: 100px;
height: 30px;
line-height: 30px;
border: 1px solid black;
position: relative;
}
.first::after {
content: '';
display: inline-block;
position: absolute;
width: 5px;
height: 5px;
right: 5px;
top: 50%;
margin-top: -2px;
border-left: 1px solid black;
border-top: 1px solid black;
transform: rotate(45deg);
transition: all 0.1s;
}
.first:hover::after {
transform: rotate(225deg);
}
.nav {
position: absolute;
display: none;
width: 100px;
background-color: pink;
display: none;
}
.nav>li {
list-style: none;
width: 100px;
height: 40px;
border: 1px solid black;
text-align: center;
line-height: 40px;
}
</style>
</head>
<body>
<div class="box">
<div class="first">一级菜单
</div>
<ul class="nav">
<li>二级菜单</li>
<li>二级菜单</li>
<li>二级菜单</li>
</ul>
</div>
</body>
<script>
var box = document.querySelector('.box')
var nav = document.querySelector('.nav')
box.onmouseover = function () {
nav.style.display = 'block';
}
box.onmouseout = function () {
nav.style.display = 'none';
}
</script>