效果:触碰一级菜单,二级菜单显示
逻辑:
1.使用ul li获得下拉菜单
2.触碰事件使用 onmousemove(鼠标触碰),onmouseout(鼠标离开)
3.触碰显示为块,离开隐藏内容
<style>
*{
margin: 0;
padding: 0;
list-style: none; //无圆点
}
#con{
width: 100px;
list-style: none;
}
#con ul li {
float: left;
width: 100px;
height: 30px;
line-height: 30px;
text-align: center;
}
#con a{
text-decoration: none; //链接无样式
color: #fff;
display: block; //显示为块元素
width: 100px;
height: 30px;
background: #ccc;
}
#con a:hover{
background-color: pink; //触碰样式为粉色
}
#con ul ul{
display: none;
}
</style>
</head>
<body>
<div id="con">
<ul>
<li id="li01">
<span>微博</span>
<img src="./向下.png" style="width: 12px;">
<ul id="ul01">
<li><a href="javascript:;">评论</a></li>
<li><a href="javascript:;">私信</a></li>
<li><a href="javascript:;">@我</a></li>
</ul>
</li>
</ul>
</div>
<script>
function myFn(param1,param2){
var myli = document.getElementById(param1);
var myul = document.getElementById(param2);
myli.onmousemove = function(){
myul.style.display = 'block';
}
myli.onmouseout = function(){
myul.style.display = 'none';
}
}
myFn('li01','ul01'); //调用函数
</script>
</body>
效果图:
参考文章:
用js(javascript)实现下拉菜单的显示与隐藏_qq_41485882的博客-CSDN博客_js根据下拉列表的值显示隐藏