如何在 JavaScript 中创建二级菜单274

在网站设计中，二级菜单通常用于为用户提供额外的导航选项，同时保持主导航菜单简洁明了。二级菜单在悬停或单击主导航项时显示。

使用 JavaScript 创建二级菜单的步骤如下：1. 创建 HTML 结构
首先，需要使用 HTML 创建主导航菜单和二级菜单：
```html

```
2. 添加 CSS 样式
接下来，使用 CSS 样式自定义主导航菜单和二级菜单的外观：
```css
#main-nav {
background-color: #000;
color: #fff;
}
#main-nav ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
#main-nav li {
margin-right: 10px;
}
#main-nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
#main-nav li:hover #sub-menu-1 {
display: block;
}
#sub-menu-1 {
display: none;
position: absolute;
background-color: #fff;
color: #000;
padding: 10px;
}
#sub-menu-1 li {
margin-bottom: 10px;
}
```
3. 编写 JavaScript
最后，使用 JavaScript 来处理二级菜单的显示和隐藏：
```javascript
const mainNav = ('main-nav');
('mouseover', (e) => {
const target = ('li');
if (!target) return;
const subMenu = ('ul');
if (!subMenu) return;
= 'block';
});
('mouseout', (e) => {
const target = ('li');
if (!target) return;
const subMenu = ('ul');
if (!subMenu) return;
= 'none';
});
```
4. 完整示例
将 HTML、CSS 和 JavaScript 片段组合在一起，得到完整的 JavaScript 二级菜单实现：
```html

#main-nav {
background-color: #000;
color: #fff;
}
#main-nav ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
#main-nav li {
margin-right: 10px;
}
#main-nav a {
color: #fff;
text-decoration: none;
padding: 10px;
}
#main-nav li:hover #sub-menu-1 {
display: block;
}
#sub-menu-1 {
display: none;
position: absolute;
background-color: #fff;
color: #000;
padding: 10px;
}
#sub-menu-1 li {
margin-bottom: 10px;
}

const mainNav = ('main-nav');
('mouseover', (e) => {
const target = ('li');
if (!target) return;
const subMenu = ('ul');
if (!subMenu) return;
= 'block';
});
('mouseout', (e) => {
const target = ('li');
if (!target) return;
const subMenu = ('ul');
if (!subMenu) return;
= 'none';
});

```
通过遵循这些步骤，可以轻松地在 JavaScript 中创建功能齐全的二级菜单，从而增强网站的导航体验。