CSS Simple Menu Navigation Bar

In this article, we introduce a very simple example to create menu navigation bar, by using HTML and CSS. A quick and simple menu navigation is very important for us, so that we can easily embedded in our website.

For this, we have created two files 'index.html' and 'style.css'. On 'index.html' page, we have used the unordered list of HTML to display Menu Navigation. On 'style.css' page, we have provided styles on the menu navigation with the help of CSS.

To implement this, simply create two files 'index.html' and 'style.css' and copy paste these codes and access 'index.html' on the browser to see the result.

index.html


<!DOCTYPE html>
<html>	
	<head>
		<title>CSS Simple menu navigation bar</title>
		<link rel="stylesheet" href="/style.css" />
	</head>
	<body>
		<ul  class="menu-nav">
			<li><a href="home.html">Home</a></li>
			<li><a href="aboutus.html">About Us</a></li>
			<li><a href="services.html">Services</a></li>
			<li><a href="contactus.html">Contact Us</a></li>
		</ul>
	</body>
</html>

style.css

ul.menu-nav { 
	list-style-type: none !important; 
	margin: 0px; 
	padding: 0px; 
	overflow: hidden; 
	background-color: #7FD4FF; 
	padding: 10px; 
	width: 325px;
} 
ul.menu-nav li { 
	display: inline; 
	text-align: center; 
	list-style-type: none !important; 
}
ul.menu-nav li + li::before {
	content: " | "; 
	padding-left: 10px; 
	padding-right: 10px;
}
a { 
	text-decoration: none;  
	color: #000; 
	} 
a:hover { 
	text-decoration: underline; 
	color: red; 
}

◀ Previous Article
Simple Show Hide Menu Navigation

Next Article ▶
jQuery loop over JSON result after AJAX Success