Trying to make hover over colors fade out

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)$; }

[/CODE]

Also in #CSS _↴