carzpedia navigation
by Sahil Sunny
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;
}
#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);
}