Trying to make hover over colors fade out

**sweetshoes18** · 07-06-2011, 01:24 PM

Hey guys, I'm trying to make the hover-over color on my menu fade out so it has a smoother appearance when you scroll over the menu.

Is there any way to make the hover over color fade out instead of the typical "on/off" ?

Here is the css:

Code:

.notice-box .form-body .fieldContainer .formTitle {width: 460px;  }

.notice-box .form-body .fieldContainer {width: 460px;  }

#divider220 {width: 940px; margin-right: 0px; float: left; background-image:url('/storage/generic/dottedvert4.jpg')}



#modulePage6025537 .largetexthome {display: none !important;}





#one {width:220px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
#two {width:220px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
#three {width:220px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
#four {width:220px; margin-right: 0px; float: left; font-size: 12px; line-height: 16px;}

#left220 {width:220px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
#right700 {width:700px; margin-right: 0px; float: left; font-size: 12px; line-height: 16px;}

#left460 {width:460px; margin-right: 20px; float: left; font-size: 12px; line-height: 16px;}
#right460 {width:460px; margin-right: 0px; float: left; font-size: 12px; line-height: 16px;}



#masthead {
height: 40px;
width: 940px;
margin: 0px 0px 10px 0px;
padding-bottom: 10px; }

#masthead .mark {
margin: 3px 0px 0px 2px;
float: left; }

#masthead img {
width: 210px;}


#masthead ul { 
margin: 0px 0px 0px 0px;
padding: 0;
list-style-type: none;
float: right; }

#masthead li { 
display: block; 
height: 38px; 
width: 110px; 
background: #dddebd url(/storage/generic/rule_nav.gif) no-repeat left top;
font-family: georgia; serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px; 
line-height: 38px; 
color: #000; 
text-align: center;
float: left; }

#masthead li a:link, li a:active, li a:visited  {
display: block;
background: #dddebd url("/storage/generic/rule_nav.gif") no-repeat left top;
color: #000; 
text-decoration: none; }

#masthead li a:hover  {
display: block;
background: #D8D9B8 url("/storage/generic/rule_nav.gif") no-repeat left top;
color: #000; 
text-decoration: none; }




#navigationTop .horizontalNavigationBar { z-index:10; width: $(CanvasWidth-ContentPaddingExternal-ContentPaddingExternal)$; }

#navigationBottom .horizontalNavigationBar { width: $(CanvasWidth-ContentPaddingExternal-ContentPaddingExternal-20)$; }