I am not going to teach you each step as you see the code , you will be able to understand it with out any problem. If you have any problem then please comment I will help you.
Screenshot:
Coding:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sanjay' HTML5 World</title>
<meta charset="utf-8" />
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background:#FFD700;
border: 1px solid #f80;
padding:5px 5px 5px 15px;
}
li
{
display:inline;
}
li a:link{
color:#222;
text-decoration:none;
}
li a:active{
color:#222;
text-decoration:none;
}
li a:visited{
color:#222;
text-decoration:none;
}
li a:hover{
color:#f30;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="service.htm">Services</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="about.htm">About</a></li>
</ul>
</body>
</html>
Screenshot:
Coding:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Sanjay' HTML5 World</title>
<meta charset="utf-8" />
<style>
ul
{
list-style-type:none;
margin:0;
padding:0;
background:#FFD700;
border: 1px solid #f80;
padding:5px 5px 5px 15px;
}
li
{
display:inline;
}
li a:link{
color:#222;
text-decoration:none;
}
li a:active{
color:#222;
text-decoration:none;
}
li a:visited{
color:#222;
text-decoration:none;
}
li a:hover{
color:#f30;
text-decoration:underline;
}
</style>
</head>
<body>
<ul>
<li><a href="home.htm">Home</a></li>
<li><a href="service.htm">Services</a></li>
<li><a href="contact.htm">Contact</a></li>
<li><a href="about.htm">About</a></li>
</ul>
</body>
</html>
