FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Navigation bar is a important part of 90% website. using this nav bar we can easily access the whole website easily. Navbar may create We can convert a normal list of HTML into an interactive navigation Bar using little bit CSS code. Here we demonstrate how can we create a simple horizontal menu.A simple HTML code to display a list in the browser
<!DOCTYPE html> <html> <head> <title>Vertical menu Demo</title> </head> <body> <ol> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a></li> <li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ol> </body> </html>
This code will generate the following output
Now for display a horizontal menu, we use the following code
<!DOCTYPE html> <html> <head> <title>Horizontal menu Demo</title> <link href="menu.css" rel="stylesheet" type="text/css"> </head> <body> <ol class=”hmenu”> <li><a href="#">Menu1</a></li> <li><a href="#">Menu2</a> </li><li><a href="#">Menu3</a></li> <li><a href="#">Menu4</a></li> </ol> </body> </html>
And write the following code in menu.css file
.hmenu{
width: 99%;
padding: 15px;
margin-right: auto;
margin-left: auto;
background-color:#9CC;
position: relative;
left:-10px;
}
.hmenu li{
display:inline;
list-style:none;
padding:15px;
background-color:#9CC;
margin-left:0px;
left:-10px;
font-weight:bold;
}
.hmenu li a{
text-decoration:none;
color:#FF0;
}
.hmenu li a:hover{
background-color:#000000;
color:#ffffff;
}
.hmenu li:hover{
background-color:#000000;
}
