用html写一个二级菜单
时间: 2023-09-30 07:06:28 浏览: 38
以下是一个简单的HTML代码,用于创建一个二级菜单:
```html
<!DOCTYPE html>
<html>
<head>
<title>二级菜单</title>
<style type="text/css">
ul {
list-style: none;
padding: 0;
margin: 0;
}
li {
display: inline-block;
position: relative;
padding: 10px;
background-color: #ccc;
border: 1px solid #999;
margin-right: 10px;
cursor: pointer;
}
li:hover ul {
display: block;
}
ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #999;
padding: 10px;
}
ul ul li {
display: block;
padding: 5px;
margin: 5px 0;
background-color: #eee;
border: 1px solid #999;
}
</style>
</head>
<body>
<ul>
<li>菜单1
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li>菜单2
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li>菜单3
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
<li>菜单4
<ul>
<li>子菜单1</li>
<li>子菜单2</li>
<li>子菜单3</li>
</ul>
</li>
</ul>
</body>
</html>
```
这个代码创建了一个简单的二级菜单,包含四个菜单项和每个菜单项下的三个子菜单项。CSS样式定义了菜单的外观和行为。当鼠标悬停在菜单项上时,它下面的子菜单项会显示出来。