Ir para conteúdo

POWERED BY:

Arquivado

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

Pacato

SubMenu sem javascript

Por , em Desenvolvimento frontend

Recommended Posts

Pacato    0

Pacato
Postado

E ae galera, novamente, enquanto desenvolvia um site aqui, me surgiu uma complicacao, estou construindo um menu dropdown com mais de 1 nivel de hierarquia, so q o problema eh q, como eu nao estou usando javascript, so css, qdo a pessoa coloca o mouse sobre o menu, tds os submenus, subsubmenus, subsub...menus, aparecem tbm, ja que no css eu utilizei o comportamente li:hover, alguem pode me dar uma dica de como resolver esse problema??No codigo abaixo, um exemplo do que eu estou falando esta no "Item Esq 2".Valeu galera,Túlio.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><title>Teste</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">html, body { padding: 0; margin: 0; background: #999; height: 100%;}ul { list-style: none; padding: 0; margin: 0; }#corpo { width: 100%; height: 100%;}#cabeca { width: 100%; height: 100px; text-align: center; color: #FFF; font-size: 14px; background: orange;}#conteudo { position: absolute; width: 100%; color: black;}#esquerda { float: left; width: 20%; }#meio { float: left; width: 60%; background: #999; text-align: center; }#direita { width: 20%; position: absolute; top: 0; left: 100%; margin: 0 0 0 -20%; }/* Menu esquerdo********************************************************/#menuesq { cursor: pointer; width: 100%; background: #fff;}#menuesq li { border: 1px solid black; position: relative;}#menuesq li ul { display: none; position: absolute; left: 100%; top: 0; width: 100%; background: #fff;}#menuesq li:hover ul { display: block; }/* Menu Direito*******************************************************/#menudir { cursor: pointer; width: 100%; background: #fff;}#menudir li { border: 1px solid black; position: relative;}#menudir li ul { display: none; position: absolute; left: -100%; top: 0; width: 100%; background: #fff;}#menudir li:hover ul { display: block; }</style></head><body><div id="corpo"> <div id="cabeca">  Cabeca </div> <div id="conteudo">  <div id="esquerda">  <ul id="menuesq">    <li>Item Esq 1</li>    <li>Item Esq 2    <ul>      <li>Subitem Esq 1</li>      <li>Subitem Esq 2      <ul>        <li>Subsubitem 1</li>        <li>Subsubitem 2</li>        <li>Subsubitem 3</li>      </ul>      </li>      <li>Subitem Esq 3</li>      <li>Subitem Esq 4</li>    </ul>    </li>    <li>Item Esq 3    <ul>      <li>Subitem Esq 5</li>      <li>Subitem Esq 6</li>    </ul>    </li>    <li>Item Esq 4    <ul>      <li>Subitem Esq 7</li>      <li>Subitem Esq 8</li>      <li>Subitem Esq 9</li>      <li>Subitem Esq 10</li>    </ul>    </li>  </ul>  </div>  <div id="meio">  Conteudo Central  </div>  <div id="direita">  <ul id="menudir">    <li>Item Dir 1</li>    <li>Item Dir 2    <ul>      <li>Subitem Dir 1</li>      <li>Subitem Dir 2</li>      <li>Subitem Dir 3</li>      <li>Subitem Dir 4</li>    </ul>    </li>    <li>Item Dir 3    <ul>      <li>Subitem Dir 5</li>      <li>Subitem Dir 6</li>    </ul>    </li>    <li>Item Dir 4    <ul>      <li>Subitem Dir 7</li>      <li>Subitem Dir 8</li>      <li>Subitem Dir 9</li>      <li>Subitem Dir 10</li>    </ul>    </li>  </ul>  </div> </div></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Genautech    0

Genautech
Postado

Não precisa usar Javascript não.

 

Desenvolvi um menu com submenu em nosso portal.

Fique à vontade para copiar.

 

Meu Carro Novo

Compartilhar este post

Link para o post
Compartilhar em outros sites

ClauberStipkovic    0

ClauberStipkovic
Postado

Olá pessoal ....também estou com essa dúvida.

 

mas acho que o meu é mais facil de resolver.

 

tenho um menu e que colocar um submenu de outro style.

 

<div id="esquerda">
	<ul>
		<li><a href="">Consultoria</a></li>
			<ul class="subMenuEsquerda">
				<li><a href="">Projetos e Documentações</a></li>
			</ul>
		<li><a href="">Ferramentas Corporativas</a></li>
		<li><a href="">Administrativo</a></li>
		<li><a href="">AMO & BPO</a></li>
		<li><a href="">Suporte</a></li>
		<li><a href="">Outros</a></li>
	</ul>
</div>

 

e o CSS é este

/* Menu da Esquerda -----------------------------------------------------------------------*/#esquerda{	float: left;	width: 130px;	height: 700px;	background-color: White;	margin: 6px 0px;}#esquerda ul{	padding:0px 0px;	margin:0px 0px;	float: left;	width: 100%;	list-style:none;	font:80% Tahoma;}#esquerda ul li a{	background-color: #d6e7f7;	color: #213184;	text-decoration: none;	padding: 3px 5px;	margin: 1px 5px;	width:100%;	float: left;	border: 1px solid #cecece;	font: 11px Tahoma;	font-weight: bold;}#esquerda  ul li a:hover {	background-color:#dbf1f1;	color: #5490bd;	padding: 3px 5px;	width:100%;	float: left;}#esquerda ul li { 	display: inline; }.subMenuEsquerda {	text-decoration: none;	background-color: white;	padding: 3px 5px;	}

eu queria fazer ele aparecer diferente do menu normal, como uma lista mesmo.

 

Muito Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ClauberStipkovic    0

ClauberStipkovic
Postado

Olá pessoal ....também estou com essa dúvida.

 

mas acho que o meu é mais facil de resolver.

 

tenho um menu e que colocar um submenu de outro style.

 

<div id="esquerda">
	<ul>
		<li><a href="">Consultoria</a></li>
			<ul class="subMenuEsquerda">
				<li><a href="">Projetos e Documentações</a></li>
			</ul>
		<li><a href="">Ferramentas Corporativas</a></li>
		<li><a href="">Administrativo</a></li>
		<li><a href="">AMO & BPO</a></li>
		<li><a href="">Suporte</a></li>
		<li><a href="">Outros</a></li>
	</ul>
</div>

 

e o CSS é este

/* Menu da Esquerda -----------------------------------------------------------------------*/#esquerda{	float: left;	width: 130px;	height: 700px;	background-color: White;	margin: 6px 0px;}#esquerda ul{	padding:0px 0px;	margin:0px 0px;	float: left;	width: 100%;	list-style:none;	font:80% Tahoma;}#esquerda ul li a{	background-color: #d6e7f7;	color: #213184;	text-decoration: none;	padding: 3px 5px;	margin: 1px 5px;	width:100%;	float: left;	border: 1px solid #cecece;	font: 11px Tahoma;	font-weight: bold;}#esquerda  ul li a:hover {	background-color:#dbf1f1;	color: #5490bd;	padding: 3px 5px;	width:100%;	float: left;}#esquerda ul li { 	display: inline; }.subMenuEsquerda {	text-decoration: none;	background-color: white;	padding: 3px 5px;	}

eu queria fazer ele aparecer diferente do menu normal, como uma lista mesmo.

 

Muito Obrigado.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

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

  Aceito