用JavaScript写一二级菜单下拉
时间: 2024-03-12 17:43:15 浏览: 26
好的,以下是一个简单的二级菜单下拉效果的 JavaScript 代码示例:
HTML 代码:
```html
<ul class="menu">
<li>菜单1
<ul class="submenu">
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li>菜单2
<ul class="submenu">
<li>子菜单4</li>
<li>子菜单5</li>
</ul>
</li>
<li>菜单3</li>
</ul>
```
CSS 代码:
```css
.menu {
list-style: none;
padding: 0;
margin: 0;
}
.menu > li {
display: inline-block;
position: relative;
padding: 10px;
background-color: #eee;
cursor: pointer;
}
.submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
margin: 0;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.submenu > li {
display: block;
padding: 10px;
cursor: pointer;
}
```
JavaScript 代码:
```javascript
var menuItems = document.querySelectorAll('.menu > li');
for (var i = 0; i < menuItems.length; i++) {
var menuItem = menuItems[i];
var submenu = menuItem.querySelector('.submenu');
if (submenu) {
menuItem.addEventListener('mouseenter', function() {
submenu.style.display = 'block';
});
menuItem.addEventListener('mouseleave', function() {
submenu.style.display = 'none';
});
}
}
```
这段代码的作用是,当鼠标移到菜单项上时,显示其下的子菜单;当鼠标移出菜单项时,隐藏其下的子菜单。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)