Definition:
CSS Vertical Navigation bar displays all your menu items vertically. See a below example of a vertical Navigation Bar. To create a vertical navigation bar, you need to style <a> element inside <li>.
Vertical Navigation Bar
Source Code:
<!DOCTYPE html>
<html>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 300px;
background-color: lightgrey;
}
li a {
display: block;
color: black;
padding: 8px 16px;
text-decoration: underline;
}
/* Change the link color on hover */
li a:hover {
background-color: black;
color: white;
}
</style>
<body>
<h3> Vertical Naviation Bar</h3>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about_us">About Us</a></li>
<li><a href="#blog">Blog</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</body>
</html>
Output:
Donate to support writers
You may be interested in the following topics:
- CSS Fixed H. Navigation Bar
- CSS Horizontal Navigation Bar
- CSS Vertical Navigation Bar
- CSS Navigation Bar Define