We would like to know how to create simple horizontal navigation menu.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.nav {<!-- ww w. j ava2 s . c o m-->
list-style: none;
}
.nav .nav-item {
float: left;
}
.nav .nav-item:hover {
}
.nav .nav-item a {
text-decoration: none;
color: white;
display: block;
text-align: center;
padding: 5px 10px;
background-color: #5591DF;
}
.nav-item a:hover {
background-color: #77ACFF;
}
</style>
</head>
<body>
<ul class="nav">
<li class="nav-item f1"><a href="home">Home</a></li>
<li class="nav-item"><a href="home"> Portfolio</a></li>
<li class="nav-item"><a href="home"> Services</a></li>
<li class="nav-item"><a href="home"> BLog</a></li>
<li class="nav-item"><a href="home"> About</a></li>
</ul>
</body>
</html>
The code above is rendered as follows: