menu marcado no hover da ul

[Annyh 4]

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

[JCMais 75]

Troque:

nav ul li a:hover {
   /*Efeitos*/
}

 

por

nav ul li:hover > a {
   color: white;
}
nav ul li:hover {
   /*efeitos do menu que contém o submenu atual*/
}

 

Sobre o slide, você pode usar Javascript, com JQuery você consegue isto bem rápido:

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

 

Aqui uma Demo que fiz rapidamente, você pode melhorar e muito: http://jsfiddle.net/JCMais/zrv37/3/embedded/result/

 

Cumprimentos. ;)

[Annyh 4]

muito bom, obrigada pela ajuda, mas o efeito não consegui fazer funcionar...