HTML实现垂直菜单
时间: 2023-07-27 07:07:10 浏览: 39
可以使用HTML和CSS来实现垂直菜单,以下是一个简单的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>垂直菜单</title>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 150px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
li a:hover {
background-color: #555;
color: #fff;
}
</style>
</head>
<body>
<ul>
<li><a href="#">菜单项1</a></li>
<li><a href="#">菜单项2</a></li>
<li><a href="#">菜单项3</a></li>
<li><a href="#">菜单项4</a></li>
<li><a href="#">菜单项5</a></li>
</ul>
</body>
</html>
```
在上面的例子中,我们使用了无序列表 `<ul>` 来创建菜单,并且给菜单添加了样式。使用样式 `list-style-type: none` 来去掉列表默认的符号,使用样式 `margin: 0` 和 `padding: 0` 来去掉列表的边距和内边距,使用样式 `width: 150px` 来设置菜单的宽度,使用样式 `background-color: #f1f1f1` 来设置菜单的背景色。
每个菜单项都是一个列表项 `<li>`,并且使用了样式 `display: block` 来让菜单项占据整个宽度,使用样式 `color: #000` 来设置菜单项的颜色,使用样式 `padding: 8px 16px` 来设置菜单项的内边距,使用样式 `text-decoration: none` 来去掉菜单项的下划线。
当鼠标悬停在菜单项上时,使用样式 `background-color: #555` 来设置菜单项的背景色,使用样式 `color: #fff` 来设置菜单项的颜色。