使用HTML和CSS创建一个二级菜单
要使用HTML和CSS创建一个二级菜单，可以使用HTML的无序列表（`<ul>`）和有序列表（`<ol>`）以及CSS的选择器和伪类。
以下是一个示例代码，演示如何创建一个简单的二级菜单：
<!DOCTYPE html>
<html>
<head>
<style>
/* CSS样式 */
ul.menu {
list-style-type: none; /* 移除默认的列表样式 */
margin: 0;
padding: 0;
}
ul.menu li {
display: inline-block; /* 水平排列菜单项 */
position: relative; /* 设置子菜单相对于父菜单的位置 */
}
ul.menu li:hover ul.sub-menu {
display: block; /* 鼠标悬停时显示子菜单 */
}
ul.sub-menu {
display: none; /* 默认隐藏子菜单 */
position: absolute; /* 相对于父菜单定位 */
top: 100%; /* 子菜单相对于父菜单的位置 */
left: 0;
background-color: #f9f9f9;
padding: 0;
}
ul.sub-menu li {
display: block; /* 垂直排列子菜单项 */
}
</style>
</head>
<body>
<!-- HTML结构 -->
<ul class="menu">
<li><a href="#">菜单1</a></li>
<li><a href="#">菜单2</a>
<ul class="sub-menu">
<li><a href="#">子菜单1</a></li>
<li><a href="#">子菜单2</a></li>
<li><a href="#">子菜单3</a></li>
</ul>
</li>
<li><a href="#">菜单3</a></li>
</ul>
</body>
</html>
在这个示例中，我们使用了一个包含两个菜单项的无序列表。第二个菜单项下面有一个包含三个子菜单项的有序列表。
CSS样式通过选择器和伪类来控制菜单的显示行为。当鼠标悬停在父菜单项上时，通过设置`display: block;`，子菜单将显示出来。
可以根据需要调整CSS样式和HTML结构以满足具体需求。
页:
[1]