Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Andrew Marques

Problema com menu e submenu

Recommended Posts

problemam.jpg

 

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>

 

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

 

OBS: Preciso em css, sem javascript.. Oq precisa mudar acima?

 

 

UP!!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Olá!

 

Para você conseguir esse efeito, será preciso aplicar os estilos do hover no seletor "li":

 

.menu ul li a:hover{ background:#FFF; margin-top:-3px; padding-bottom:13px; border-bottom:1px solid #FFF; }

para

 

 

.menu ul li:hover { background:#FFF; margin-top:-3px; padding-bottom:13px; border-bottom:1px solid #FFF; }

 

Deste modo, enquanto o ponteiro do mouse estive encima do submenu, o li estará em seu estado hover.

;D

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.