html导航栏纵向代码
时间: 2023-12-08 09:02:49 浏览: 153
jQuery纵向树形结构图菜单代码.zip
很高兴为您解答。以下是一个简单的HTML导航栏纵向代码的例子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Vertical Navigation Bar</title>
<style>
nav {
background-color: #f2f2f2;
width: 200px;
padding: 20px;
position: fixed;
height: 100%;
}
nav ul {
list-style-type: none;
padding: 0;
margin: 0;
}
nav li {
margin: 10px 0;
}
nav a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
nav a:hover {
background-color: #ddd;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<div style="margin-left:200px;">
<h2>Vertical Navigation Bar</h2>
<p>This is an example of a vertical navigation bar.</p>
</div>
</body>
</html>
```
阅读全文