A completely free black horizontal menu using pure css only. You can easily copy and paste the following css style and html codes for your site and it should work straight away.

Let's learn into the codes and learn what you can modify to suit your needs. Below is the css style codes.

<style>
	body{
		margin:0;
		padding:0;
		font-family:Arial;
	}
	
	#nav-panel{
		background:#000;
		display:inline-block;
		width:100%;
	}
	
	#nav-panel ul,
	#nav-panel ul li,
	#nav-panel ul li a{
		margin:0;
		padding:0;
		list-style:none;
		display:block;
		color:#fff;
		text-decoration:none;
		font-size:0.8rem;
	}

	#nav-panel > .nav-menu{
		float:right;
		display:block;
		border:0;
	}
	
	#nav-panel ul li{
		float:left;
		position:relative;
	}
	
	#nav-panel > .nav-menu > li > a{
		padding: 0px 22px;
		border-right: 1px solid #4e4e4e;
		border-bottom:none;
		line-height:55px;
	}
	
	#nav-panel > .nav-menu > li > a:hover{
		background:#195292;
	}
	
	#nav-panel > .nav-menu > li:last-child > a{
		border:none;
	}
	
	#nav-panel ul li ul{
		display:none;
	}
	
	#nav-panel ul > li:hover > ul{
		display:block;
		position:absolute;
		top:55px;
		left:0;
		background:#000;
		z-index:100;
		min-width: 200px;
		moz-border-radius: 0 0 5px 5px;   
		-webkit-border-radius: 0 0 5px 5px; 
		border-radius: 0 0 5px 5px;
	}
	
	#nav-panel ul li ul li a, #nav-panel ul li ul li ul li a{
		padding:10px 17px;
		border-bottom:solid 1px #4e4e4e;
	}
	
	#nav-panel ul > li > ul > li:last-child > a{
		border-bottom:none;
		moz-border-radius: 0 0 5px 5px;   
		-webkit-border-radius: 0 0 5px 5px; 
		border-radius: 0 0 5px 5px;
	}
	
	#nav-panel ul li ul li{
		float:none;
	}
	
	#nav-panel ul li:hover ul li:hover a:hover{
		transition: all 0.25s ease-out;
		background: #2c2c2c;
	}
	
	#nav-panel ul > li:hover > ul > li:hover ul{
		top:0;
		left:200px;
	}
</style>

This will be the html codes part.

<div id="nav-panel">
	<ul class='nav-menu'>
	   <li><a href='#'><span>Home</span></a></li>
	   <li class='active'><a href='#'><span>Services</span></a>
		  <ul>
			 <li ><a href='#'><span>Build with Us</span></a>
				<ul>
				   <li><a href='#'><span>Single Storey</span></a></li>
				   <li><a href='#'><span>Double Storey</span></a></li>
				</ul>
			 </li>
			 <li ><a href='#'><span>Paving and Garden</span></a>
				<ul>
				   <li><a href='#'><span>Design Ideas</span></a></li>
				   <li><a href='#'><span>Pacing Information</span></a></li>
				</ul>
			 </li>
		  </ul>
	   </li>
	   <li><a href='#'><span>News</span></a></li>
	   <li><a href='#'><span>Media</span></a></li>
	   <li><a href='#'><span>About</span></a></li>
	   <li><a href='#'><span>Contact</span></a></li>
	</ul>
</div>

If you see above codes, you can see the menu is wrapped under a div tag which is called nav-panel. This nav-panel has a black background. If you want to change this color, you can simply change the style under this class name. For example, if you want to change the background of the menu bar to blue background color. You can add the following code to overwrite the existing style or modify directly the existing style.

#nav-panel{
	background:blue;
}

The current example of the navigation has been positioned on the right hand side, if you want to place it on the left hand side, you can remove the style of the float in the css code.

#nav-panel > .nav-menu{
     float:right; //remove this code if you prefer to have it located on the left hand side.
     display:block;
     border:0;
}

If you have further question or need some help. Feel free to post your comment below.

Demo File for Horizontal Black Menu Navigation.

Download