How to create simple menu using css | Sanwebcorner

How to create simple menu using css

In this tutorial i am going to explain about how to create a simple menu using css, In every website important thing is menu bar, we seen different types of menu bars in websites, This is one of the basic menu created using css and html.If you are beginner you try this type of simple menus.


<!DOCTYPE html>
<html>
<head>
<style type="text/css">
ul
{
list-style-type:none;
margin:0;
padding:0;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#7C1836;
text-align:center;
padding:8px;
text-decoration:none;
text-transform:uppercase;
}
a:hover,a:active
{
background-color:#440D1E;
}
</style>
</head>
<body>
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="products.html">Products</a></li>
<li><a href="gallery.html">Gallery</a></li>
<li><a href="contact.html">Contact Us</a></li>
</ul>
</body>
</html>