html+css部分
<style type="text/css">
.link1{
display: flex;
width: 50px;
height: 30px;
background-color: #666666;
text-decoration: none;
color: #ffffff;
justify-content: center;
align-items: center;
}
.phones{
position: absolute;
display: none;
margin: 0;
padding: 0;
list-style-type: none;
}
.phone{
justify-content: center;
display: flex;
align-items: center;
margin: 0;
padding: 0;
width: 50px;
height: 30px;
background-color: #888888;
}
.phone>a{
text-decoration: none;
color: #f7f7f7;
}
</style>
<body>
<a href="#" class="link1">手機</a>
<ul class="phones">
<li class="phone">
<a href="#1">華爲</a>
</li>
<li class="phone">
<a href="#2">小米</a>
</li>
<li class="phone">
<a href="#3">蘋果</a></li>
<li class="phone"><a href="#4">三星</a></li>
<li class="phone"><a href="#5">OPPO</a></li>
<li class="phone"><a href="#6">VIVO</a></li>
<li class="phone"><a href="#7">Realme</a></li>
<li class="phone"><a href="#8">魅族</a></li>
<li class="phone"><a href="#9">一加</a></li>
<li class="phone"><a href="#10">黑鯊</a></li>
<li class="phone"><a href="#11">努比亞</a></li>
<li class="phone"><a href="#12">錘子</a></li>
</ul>
</body>
js部分
<script type="text/javascript>
var link1=document.querySelector('.link1')
var phones = document.querySelector('.phones')
link1.onmouseover=function(){
phones.style.display='block'
}
link1.onmouseout=function(){
var num = 0
phones.querySelectorAll('.phone').forEach(function(phone,index){
phone.onmouseover=function(){
phones.style.display='block'
/*console.log(phone)*/
phone.style.backgroundColor='skyblue'
}
phone.onmouseout=function(){
phone.style.backgroundColor=''
}
})
console.log('num:' + num)
/*if(num ==0) {
phones.style.display='none'
}*/
phones.style.display='none'
phones.onmouseout=function(){
phones.style.display='none'
}
}
</script>