menu marcado no hover da ul

salve pessoal...

fiz um menu pro meu site com sub-menu, mas gostaria que quando tivesse em algum item do sub-menu o menu ficasse marcado indicando onde estou, e tambem um efeito de slide fade ou coisa parecida, alguem sabe onde posso encontrar algo do tipo, ou alguma dica?

meu css esta assim:

#menu {
border: 1px solid #c7c7c7;
font: 12px Arial;
height: 50px;
text-transform: uppercase;

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(235, 235, 235) ), color-stop(0.5, rgb(250, 250, 250) ) ); / Chrome /

-webkit-box-shadow: 0 2px 7px #999;
box-shadow: 0 2px 7px #999;

background-image: -moz-linear-gradient(center bottom, rgb(235, 235, 235) 50%, rgb(250, 250, 250) 50% ); / FF /

-moz-box-shadow: 0 2px 7px #999;
}

ul#nav {

 letter-spacing: 1px;
 margin-left: 0px;
}

ul#nav li {

float: left;
position: relative;
}

ul#nav li a {

 color: #3a3a3a;
 cursor: pointer;
 display: block;
float: left;
height: 51px;
line-height: 50px;
padding: 0 20px;
 text-decoration: none;
}

ul#nav li a:hover {

 background: #989898;
 color: #fff;
}

ul#nav li ul {

display: none;
left: 0;
position: absolute;
top: 51px;
z-index: 1;
}

ul#nav li:hover ul {

display: block;
}

ul#nav li ul a {

background: #989898;
color: #3a3a3a;
width: 88px;

background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.5, rgb(235,
235, 235) ), color-stop(0.5, rgb(250, 250, 250) ) ); / Chrome /

 -webkit-box-shadow: 0 2px 7px #999;
 box-shadow: 0 2px 7px #999;
 background-image: -moz-linear-gradient(center bottom, rgb(235, 235, 235)
 50%, rgb(250, 250, 250) 50% ); /* FF */
 -moz-box-shadow: 0 2px 7px #999;
}

ul#nav li ul a:hover {

color: #fff;
}

 color: white;
}

$('nav ul li.submenu').hover(function(){
 $this = $(this);
 $this.find('ul').slideDown('slow');
}, function(){
 $this = $(this);
 $this.find('ul').slideUp('slow');
});