NAVIGATION Menu

NAVIGATION Menu is used to give various links inside a web-page. Here we'll learn to create a simple Navigation menu using listing tags and required CSS.

HTML Coding of a simple Navigation menu

(How to write a CSS in HTML code)

<html>
<head>
<title>Navigation Menu</title>
<head>
<body>
	<div class="wrap">
		<div class="nav">
			<ul>
				<li><a href="#">HOME</a></li>
				<li><a href="#">ABOUT</a></li>
				<li><a href="#">SERVICES</a></li>
				<li><a href="#">SOLUTIONS</a></li>
				<li><a href="#">CONTACT</a></li>
			</ul>
		</div>
	</div>
</body>
</html>

Browser's view :


Adding CSS

Start adding following CSS in <head></head> tag..

Remove List Type

(How to write a CSS in HTML code)

<style>
.nav ul{ list-style-type:none;}
</style>

Browser's view :

 

Give Background Color and Align text

(How to write a CSS in HTML code)

<style>
.nav ul{ list-style-type:none;}
.nav ul li{ float:left; padding:0px 5px; background:#000; text-align:center;}
</style>

Browser's view :

Give color to Text

(How to write a CSS in HTML code)

<style>
.nav ul{ list-style:none;}
.nav ul li{ float:left; padding:0px 5%; background:#000; text-align:center;}
.nav ul li a{ color:#ccc;}
</style>

Browser's view :

Change Text color on Mouse Hover

(How to write a CSS in HTML code)

<style>
.nav ul{ list-style:none;}
.nav ul li{ float:left; padding:0px 5%; background:#000; text-align:center;}
.nav ul li a{ color:#ccc;}
.nav ul li:hover a{ color:#000;}
.nav ul li:hover{ background:#ccc;}
</style>

Browser's view :

Final Layout