二级导航--鼠标悬浮菜单出现二级菜单

2023年2月18日 127次阅读 来源: GuanJINP

二级导航–鼠标悬浮菜单出现二级菜单

<!DOCTYPE html>

<html>
<head >
<meta charset="utf-8">
<title>鼠标悬浮菜单出现二级菜单</title >
<style> a{ color: #fff; text-decoration: none; } ul { margin: 0; list-style: none; } #menu { width: 500px; height: 60px; background: slategray; border-radius: 6px; box-shadow: 2px 2px 5px snow; } #menu li { float: left; margin-top: 10px; line-height: 22px; padding: 0; position: relative; } #menu li a { padding: 10px 20px; display: inline-block; } #menu li .hover { background: #fff; opacity: 0.5; color: gray; border-radius: 5px; } #menu li .lis { width: 300px; height: 40px; line-height: 40px; border-radius: 5px; background: lightblue; position: absolute; top: 70px; } #menu li .lis a { padding: 0 10px; background: none; opacity: 1; color: #fff; } #menu li .lis a:hover { text-decoration: underline; } </style>
<script> window.onload = function() {  var oUl = document.getElementById('menu'); var aLi = oUl.getElementsByTagName('li'); var aDiv = oUl.getElementsByTagName('div'); var timer = null; for (var i = 0; i < aLi.length; i++) { var oA = aLi[i].getElementsByTagName('a')[0]; oA.index = i; clearTimeout(timer); oA.onmouseover = function() {  this.className = 'hover'; aDiv[this.index].style.display = 'block'; } oA.onmouseout = function() {  this.className = ''; n = this.index; timer = setTimeout(function() {  aDiv[n].style.display = 'none'; }, 200); } aDiv[i].onmouseover = function() {  clearTimeout(timer); this.style.display = 'block'; } aDiv[i].onmouseout = function() {  this.style.display = 'none'; } } } </script>
</head>
<body>
<div>
<ul id = "menu">
<li>
<a href ="javascript:;" >首页</a>
<div class ="lis" style ="display:none;">
<a href = "javascript:;">手机</a >
<a href = "javascript:;">电脑</a>
<a href="javascript:;">知识点</a>
</div>
</li>
<li>
<a href="javascript:;">品牌</a>
<div class="lis" style="display:none;">
<a href="javascript:;">华为</a>
<a href="javascript:;">小米</a>
<a href="javascript:;">苹果</a>
</div>
</li>
<li>
<a href="javascript:;">课程</a>
<div class="lis" style="display:none;">
<a href="javascript:;">js课</a>
<a href="javascript:;">css3课</a>
<a href="javascript:;">HTML5课</a>
<a href="javascript:;">Jquery课</a>
</div>
</li>
</ul>
</div>
</body>
</html>
  • 效果如下

《二级导航--鼠标悬浮菜单出现二级菜单》

    原文作者：GuanJINP
    原文地址: https://blog.csdn.net/weixin_42617075/article/details/82022212
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞