Text Links
3. CSS Navigation Bars
3.1. Vertical Navigation Bars
The figure is an example of a vertical navigation bar. This is achieved by
display value of the link inside the list tag as block.
Refer to the given code below and Remember also to retain the proper order of link states in your code.
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 150px;
background-color: rgb(42,157,143);
}
li a:link{
display: block;
color: black;
padding: 10px;
text-decoration: none;
}
li a:visited{
color: black;
}
li a:hover {
background-color: rgb(38,70,83);
color: white;
}
li a.active {
background-color: rgb(138,177,125);
color: white;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>
</nav>
</body>
</html>