I have a code that I'm using and I want to make the tabs in the navigation bar shrink when I hover over them, similar to how it works on apple.com. When you click on the search bar on Apple's site, the other tabs shrink. How can I implement this feature in my code?
Here's the link to my code on jsfiddle
HTML:
<div id="wrapper">
<nav id="mainnav">
<ol>
<li class="home"><a href="http://www.domain.com"></a></li>
<li class="news"><a href="http://www.domain.com/p/">News</a></li>
<li class="photos"><a href="http://www.domain.com/channels/s/">Photos</a> </li>
<li class="biography"><a href="http://www.domain.com/e/">Biography</a></li>
</ol>
</nav>
</div>
CSS:
div#wrapper{
width:990px;
height:auto;
margin:0 auto;
font:15px Arial,Verdana,Helvetica,sans-serif;
}
div#wrapper #mainnav{
width:100%;
height:40px;
border-bottom:1px solid #c4c4c4;
float:left;
clear:both;
background-color: #5b5b5b;
background-image: -moz-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
background-image: -webkit-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
background-image: -o-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
background-image: -ms-linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
background-image: linear-gradient(#5b5b5b,#4d4d4d,#3f3f3f);
}