Google Navigation CSS


Inspired by Google, I wanted to create a navigation bar that looked similar. Below is the css and html for you to create one too.

CSS
The colors are fairly similar to Google’s navigation. Please comment below if you have any questions with the CSS.

body{
	margin:0;
}
#navWrap{
	margin:0;
	background-color:#2d2d2d;
	overflow:hidden;
}
#nav{
	font-family:Arial, sans-serif;
	font-size:12px;
	list-style:none;
	margin:0;
	padding:0;
}
#nav a{
	color:#cccccc;
	text-decoration:none;
	padding:8px;
	display:block;
}
#nav li{
	float:left;
}
#nav li:hover a{
	background-color:#444444;
	color:#ffffff;
}
#nav a.active{
	color:#ffffff;
	padding:6px 8px 8px 8px; 
	font-weight:bold;
	border-top:2px solid #dd4b39;
}

HTML
Below is the HTML that I used for the demo. You can customize the HTML to fit your needs but remember to keep the same structure as shown below. If you do not keep the same structure the CSS will not work.

<div id="navWrap">
<ul id="nav">
<li>
<a href="#">+Jordan</a>
</li>
<li>
<a class="active" href="#">Search</a>
</li>
<li>
<a href="#">Images</a>
</li>
<li>
<a href="#">Videos</a>
</li>
<li>
<a href="#">Maps</a>
</li>
<li>
<a href="#">News</a>
</li>
<li>
<a href="#">Shopping</a>
</li>
<li>
<a href="#">Gmail</a>
</li>
<li>
<a href="#">More</a>
</li>
</ul>
</div>

View live demo here

Please let me know if you come across any browser issues, enjoy!