Screenshots -
This is what it looks like before you hover over the company link

This is what it looks like while you hover over the company link

It should still maintain the curve
My code looks like this
Html -
Code: Select all
<div id="header">
<div id="headerLogo"><img src="Untitled-2.png" width="200" height="58" /></div>
<div id="headerlink" class="active">Home</div>
<div id="headerlink">Features</div>
<div id="headerlink">Benefits</div>
<div id="headerlink">How it works</div>
<div id="headerlink">Company</div>
</div>Code: Select all
#header {width:100%; height:80px; border:1px solid #ccc; border-radius: 0 0 30px 30px;
background-color:#3383a6;
background-image: -moz-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);
background-image: -webkit-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);
background-image: -o-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);
background-image: -ms-linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);
background-image: linear-gradient(bottom , #C5C5C5, #E9E9E9 55px);}
#headerLogo {float:left; width:225px; padding:10px 0 0 25px;}
#headerlink {float:left; width:139px; height:100%; border-left:1px solid #bbbbbb; font: 22px 'ComfortaaThin', Arial, sans-serif; text-align:center; line-height:75px;}
#headerlinklast {float:left; width:139px; height:100%; border-left:1px solid #bbbbbb; font: 22px 'ComfortaaThin', Arial, sans-serif; text-align:center; line-height:75px;}
#headerlink:hover{
background-color:#3383a6;
background-image: -moz-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);
background-image: -webkit-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);
background-image: -o-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);
background-image: -ms-linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);
background-image: linear-gradient(bottom , #8c8a8a, #C5C5C5 55px);}Is there something i can stick on the hover CSS style to sort this out, some sort of display option ?
Many thanks