鼠标一离开导航菜单,二级菜单就隐藏,移不到二级菜单
时间: 2023-10-04 16:04:47 浏览: 52
您可以使用CSS和JavaScript来实现这个效果。当鼠标移开导航菜单时,您可以使用JavaScript来隐藏所有二级菜单。以下是一个示例代码:
HTML:
```
<ul id="menu">
<li><a href="#">一级菜单 1</a>
<ul>
<li><a href="#">二级菜单 1</a></li>
<li><a href="#">二级菜单 2</a></li>
</ul>
</li>
<li><a href="#">一级菜单 2</a>
<ul>
<li><a href="#">二级菜单 1</a></li>
<li><a href="#">二级菜单 2</a></li>
</ul>
</li>
</ul>
```
CSS:
```
ul ul {
display: none; /* 隐藏所有二级菜单 */
}
ul li:hover > ul {
display: block; /* 鼠标悬停在一级菜单时,显示其后面的二级菜单 */
}
```
JavaScript:
```
var menu = document.getElementById("menu");
menu.addEventListener("mouseleave", function() {
var submenus = menu.querySelectorAll("ul ul");
for (var i = 0; i < submenus.length; i++) {
submenus[i].style.display = "none"; // 隐藏所有二级菜单
}
});
```
这将在鼠标移开导航菜单时隐藏所有二级菜单。注意,您需要将JavaScript代码放在文档加载完成后执行,以确保所有HTML元素都已经加载完毕。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)