carzpedia navigation

by Ryan Mitchell

HTML

<div id="black_bar"></div>
<div id="top_nav">
<a href="#"><div class="menu" id="home">HOME</div></a>
<a href="#"><div class="menu">LIST OF CAR MANUFACTURERS</div></a>
<a href="#"><div class="menu">WHY USE CARZPEDIA?</div></a>
<a href="#"><div class="menu">ABOUT US</div></a>
<a href="#"><div class="menu">CONTACT US</div></a>
</div>

CSS

body{
	margin:0;
    background: pink;
}
#top_nav{
	background-color:#000;
	height:auto;
	max-height:3em;
}
#top_nav a{
	text-decoration:none;
	color:#FFF;
	font-family:Arial, Helvetica, sans-serif;
}
.menu{
	display:inline-block;
	padding:1em;
	font-size:1em;
	height:1em;
}
.menu:hover{
	background-color:#09F;
	border-bottom-left-radius:2em;
	border-bottom-right-radius:2em;
	height:3em;
	-webkit-transition:height 500ms ease;
	-moz-transition:height 500ms ease;
	-ms-transition:height 500ms ease;
	-o-transition:height 500ms ease;
	transition:height 500ms ease;
}
#home{
	color:#09F;
}
#home:hover{
	color:#FFF;
}
#container{
	margin-top:10%;
	text-align:center;
}
#searchbox{
	width:19%;
	border-bottom:.1em solid #000;
	border-top:0;
	border-left:0;
	border-right:0;
	font-family:Arial, Helvetica, sans-serif;
	font-size:2em;
	background:url(search1.png) left center no-repeat;
	padding-left:1em;
	-webkit-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	transition:all 500ms ease;
}
#searchbox:focus{
	outline:none;
	border-bottom-color:#09F;
	width:45%;
	background-image:url(search2.png);
}