本文实例为大家分享了JavaScript实现鼠标经过显示下拉框的具体代码，供大家参考，具体内容如下
代码：
<!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 >Document</ title >
< style >
* {
margin: 0;
padding: 0;
}
.nav {
margin: 100px auto;
width: 500px;
}
.nav>li {
float: left;
}
li {
list-style: none;
}
a {
display: block;
text-decoration: none;
color: gray;
height: 40px;
width: 100px;
text-align: center;
line-height: 40px;
box-sizing: border-box;
}
.nav>li>a {
color: black;
}
.nav>li>a:hover {
background-color: lightgray;
}
.nav>li>ul>li>a {
/* display: none; */
border: 1px solid orange;
border-top: none;
}
.nav>li>ul>li>a:hover {
background-color: lightyellow;
}
.nav>li>ul {
display: none;
}
</ style >
</ head >
< body >
< ul class = "nav" id = nav >
< li >
< a href = "#" >新浪</ a >
< ul >
< li >< a href = "#" >新闻</ a > </ li >
< li >< a href = "#" >体育</ a > </ li >
< li >< a href = "#" >快讯</ a > </ li >
< li >< a href = "#" >生活</ a > </ li >
< li >< a href = "#" >微博</ a > </ li >
</ ul >
</ li >
< li >
< a href = "#" >新浪</ a >
< ul >
< li >< a href = "#" >新闻1</ a > </ li >
< li >< a href = "#" >体育1</ a > </ li >
< li >< a href = "#" >快讯1</ a > </ li >
< li >< a href = "#" >生活1</ a > </ li >
< li >< a href = "#" >微博1</ a > </ li >
</ ul >
</ li >
< li >
< a href = "#" >新浪</ a >
< ul >
< li >< a href = "#" >新闻2</ a > </ li >
< li >< a href = "#" >体育2</ a > </ li >
< li >< a href = "#" >快讯2</ a > </ li >
< li >< a href = "#" >生活2</ a > </ li >
< li >< a href = "#" >微博2</ a > </ li >
</ ul >
</ li >
</ ul >
< script >
var heads = document.querySelectorAll('.nav>li');
for (var i = 0; i < heads.length ; i++) {
heads[i] .onmouseover = function () {
this.children[1] .style.display = "block" ;
}
heads[i] .onmouseout = function () {
this.children[1] .style.display = "none" ;
}
}
</script>
</ body >
</ html >
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持服务器之家。
原文链接：https://blog.csdn.net/KathyLJQ/article/details/115585358
查看更多关于JavaScript实现鼠标经过显示下拉框的详细内容...