NAVIGATION BARS/ MENU BARS
VERTICAL NAVIGATION BARS
<!DOCTYPE html>
<html>
<body>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</body>
A background color is added to the links to show the link area.
whole link area is clickable, not just the text
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li a {
display: block;
width: 60px;
background-color: #dddddd;
}
</style>
</head>
<body>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
HORIZONTAL NAVIGATION BARS
<!DOCTYPE html>
<html>
<head>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
display: inline;
}
</style>
</head>
<body>
<ul>
<li><a href="">Home</a></li>
<li><a href="">News</a></li>
<li><a href="">Contact</a></li>
<li><a href="">About</a></li>
</ul>
</body>
</html>
NAVIGATION BARS
li a {
ul {
display: block;
list-style-type: none;
color: white;
margin: 0;
text-align: center;
padding: 0;
padding: 14px 16px;
overflow: hidden;
text-decoration: none;
background-
}
color: #333;
}
/* Change the link color to #111
li { (black) on hover */
float: left; li a:hover {
} background-color: #111;
}
.active {
background-color: #04AA6D;
}
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li style="float:right"><a class="active" href
="#about">About</a></li>
</ul>
li {
border-right: 1px solid #bbb;
}
li:last-child {
border-right: none;
}