Horizontal Navigation Bar Creation using CSS

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

Horizontal Navigation

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;
}