要在页面上创建简单的多级菜单,可以使用JavaScript编写代码。以下是一些实现多级菜单的基本步骤:
<div id="menu">
<ul>
<li id="item1">Item 1</li>
<li id="item2">Item 2</li>
<li id="item3">Item 3
<ul>
<li id="subitem1">Subitem 1</li>
<li id="subitem2">Subitem 2</li>
</ul>
</li>
</ul>
</div>
const items = document.querySelectorAll("#menu li");
items.forEach((item) => {
item.addEventListener("mouseover", (event) => {
const submenu = event.target.querySelector("ul");
if(submenu){
submenu.style.display = "block";
}
});
item.addEventListener("mouseout", (event) => {
const submenu = event.target.querySelector("ul");
if(submenu){
submenu.style.display = "none";
}
});
});
#menu ul {
list-style: none;
padding: 0;
margin: 0;
}
#menu li {
display: inline-block;
padding: 10px;
}
#menu li:hover {
background-color: #ddd;
}
#menu ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
}
#menu ul ul li {
display: block;
background-color: #fff;
}
通过这些步骤,您将能够在页面上创建简单的多级菜单。记得为菜单项添加唯一的标识符,并在JavaScript代码中引用它们。同时,使用CSS样式表来美化菜单以使其看起来更具吸引力。