Submenu marcado com css

[Andrew Marques 47]

Boa noite pessoal,

andei procurando na net, mas não achei a solução...

 

Seguinte, tenho um menu com submenus, quando passo o mouse no menu aparece o submenu corretamente, porém quando eu tiro o mouse do menu selecionado e vou navegar no submenu ele desmarca o menu principal, o que preciso alterar no meu css para quando eu for para o submenu o menu continue ativado com o meu 'hover'.

 

Segue código HTML:

<div class="menu">
 <ul>
  <li><a href="#">Visão Geral</a></li>
				
  <li><a href="#">Cadastros <img src="img/seta_submenu.png" alt="" /></a>
				
   <ul class="submenu">
    <li>teste<li>
   </ul>
				
  </li>
				
  <li><a href="#">Ordem de Serviço</a></li>
  <li><a href="#">Fluxo de Caixa</a></li>
  <li><a href="#">Vendas <img src="img/seta_submenu.png" alt="" /></a></li>
 </ul>
</div>

 

 

Segue CSS:

<div class="menu">
 <ul>
  <li><a href="#">Visão Geral</a></li>
				
   <li><a href="#">Cadastros <img src="img/seta_submenu.png" alt="" /></a>
				
    <ul class="submenu">
     <li>teste<li>
  </ul>
				
   </li>
				
   <li><a href="#">Ordem de Serviço</a></li>
   <li><a href="#">Fluxo de Caixa</a></li>
   <li><a href="#">Vendas <img src="img/seta_submenu.png" alt="" /></a></li>
 </ul>
</div>

 

 

Grato desde já...

 

Obrigado!

[Cristianoferr 32]

vc recolocou o html

[Andrew Marques 47]

Ops, hehe

segue CSS:

 

/* MENU */
.menu{
	float:left;
	margin-left:25px;
	margin-top:43px;
}
.menu ul li{
	float:left;
	display:inline;
	margin-right:7px;
	position:relative;
}
.menu ul li a{
	float:left;
	padding:10px 15px 10px 15px;
	border:1px solid #C8D3DD;
	border-bottom:none;
	border-top-left-radius:3px;
	border-top-right-radius:3px;
	background:-webkit-linear-gradient(rgb(255,255,255) 0%, rgb(226,231,237) 6%, rgb(226,231,237) 100%);
	color:#395A7B;
    font-family:'Proxima_nova_regular';
	font-size:14px;
	display:block;
}
.menu ul li a:hover{
	background:#FFF;
	margin-top:-3px;
	padding-bottom:13px;
	border-bottom:1px solid #FFF;
}
.menu ul li a img{
	margin-left:2px;
}

.menu ul li:hover ul.submenu{
	display:block;
}

/* SUBMENU */
.menu ul li ul.submenu{
	display:none;
	width:300px;
	position:absolute;
	margin-top:38px;
	background:#FFF;
	padding-top:5px;
	border:1px solid #C9D3DD;
	border-top:1px solid #FFF;
}

[bruno_mosciatti 22]

É uma boa dúvida!

 

O javascript é uma saída, você pode colocar que quando estiver no :hover da li do submenu, adiciona a classe 'ativo' para a li do menu.

[Andrew Marques 47]

É uma boa dúvida!

 

O javascript é uma saída, você pode colocar que quando estiver no :hover da li do submenu, adiciona a classe 'ativo' para a li do menu.

 

Tem um exemplo simples pra mim ver??

[bruno_mosciatti 22]

Tem um exemplo simples pra mim ver??

 

Exemplo: http://maujor.com/tutorial/ddownmenu/horizontal-pt3.html

 

Fonte: http://maujor.com/tutorial/ddownmenu-a.php

[Andrew Marques 47]

Eu vi nessa video aula, o cara fez submenu com 3 níveis e a marcação que preciso apenas com CSS3...

 

Mas não consegui identificar qual a diferença do meu código pro dele, alguem sabe como faço esse efeito q preciso apenas com css??

 

Quando passo o mouse na 'li' do meu menu ele pega o efeito 'hover', qro q esse efeito continue quando eu coloco o mouse na ul do submenu...

 

Help-me please!!!