Ir para conteúdo

POWERED BY:

Arquivado

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

ReAdShOtErS

[Resolvido] Barra De Navegação Não Abre Submenus

Por , em Desenvolvimento frontend

Recommended Posts

ReAdShOtErS    0

ReAdShOtErS
Postado

Menu Css Não Exibe Os Submenus - Segue Abaixo O HTML e o CSS

 

Quem Puder Me Ajudar A Fazer Eles Abrirem Eu Agradeceria Muito

Já Rodei Em Tudo Q É Forum E ninguém Sabe Como Fazer.

 

Codigo Em Uso

 

 

HTML(no site)

 

CSS(no site)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Meio estranho esse código... melhor trabalhar com display: none/block.

Altere as seguintes linhas para você ver:

/* keep the 'next' level invisible by placing it off screen. */
.menu2 ul, 
.menu2 li:hover ul ul, 
.menu2 li:hover ul :hover ul ul,
.menu2 li:hover ul :hover ul :hover ul ul,
.menu2 li:hover ul :hover ul :hover ul :hover ul ul {display: none;}

.menu2 li:hover ul.sub {display: block; position: absolute;top: 35px;left: -40px}
Com isso o menu já funciona no Firefox..

para trazer o IE à vida... só com javascript...

tem uma solução simples... para menus de 1 subnivel no Maujor:

http://www.maujor.com/tutorial/ddownmenu.php

Compartilhar este post

Link para o post
Compartilhar em outros sites

ReAdShOtErS    0

ReAdShOtErS
Postado

Bruno valeu cara Eu aqui Quebrando cabeça E você Desvendou de cara

Muito Obrigado Mesmo Os Menus Já Aparecem Vou Dás Umas Mexidas Aqui Pra Ver Se Consigo Ajeitar Outro Problema

Se Não Conseguir Retorno Aqui, Mais A respeito Dos Submenus Está Funcionando perfeitamente Só Estão Meio Malucos.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tranquilo... qualquer coisa, volte à postar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ReAdShOtErS    0

ReAdShOtErS
Postado

Não Tinha Reparado Na Sua Resposta Toda E Já Perguntar Justamente O Q você Já Respondeu,

Q é Como Fazelo Funcionar No IE, Particularmente E Uso O FF Mais Ainda Tem Os Loucos Por IE,

Bom Eu Entrei No Site E Sinceramente Não Entendi Nada Alias Não Saco Nada De Css.

 

Os Codigos São esses Só Não Sei Onde Enfialos

Se Puder Me Ajudar Nesta Tarefa

 

startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
  }
  node.onmouseout=function() {
  this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;

li:hover ul, li.over ul { 
	display: block; }

<ul id="nav">

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

Tá.. ficou meio confuso e complicado... além doque tinha alguns erros na marcação.. algumas LI não fechadas..

olha o código na integra funcionando no IE:

<style type="text/css">
/* CSS Document */
/*Credits: CSSplay */
/*URL: http://www.cssplay.co.uk/menus/pro_drop2 */
.preload2 {background: url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/button4.gif');}
#menu {margin:0; height:40px; background:#fff url('http://readshoters.googlepages.com/EF2.JPG') repeat-x; position:relative; font-family:arial, verdana, sans-serif; list-style-type:none; padding-left:32px; padding-right:0; padding-top:0; padding-bottom:0 }
#menu li.top {display:block; float:left; position:relative;}
#menu li a.top_link {display:block; float:left; height:40px; line-height:33px; color:#FFFFFF; text-decoration:none; font-size:11px; font-weight:bold; padding:0 0 0 12px; cursor:pointer;}
#menu li a.top_link span {float:left; display:block; padding:0 24px 0 12px; height:40px;}
#menu li a.top_link span.down {float:left; display:block; height:40px; background:url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/down.gif') no-repeat right top;; padding-left:12px; padding-right:24px; padding-top:0; padding-bottom:0}
#menu li a.top_link:hover {color:#fff; background: url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/button4.gif') no-repeat;}
#menu li a.top_link:hover span {background:url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/button4.gif') no-repeat right top;}
#menu li a.top_link:hover span.down {background:url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/button4a.gif') no-repeat right top;}

#menu li:hover > a.top_link {color:#FFFFFF; background: url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/button4.gif') no-repeat;}
#menu li:hover > a.top_link span {background:url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/button4.gif') no-repeat right top;}
#menu li:hover > a.top_link span.down {background:url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/button4a.gif') no-repeat right top;}


#menu table {border-collapse:collapse; width:0; height:0; position:absolute; top:0; left:0;}

/* Default link styling */

/* Style the list OR link hover. Depends on which browser is used */

#menu a:hover {visibility:visible;}
#menu li:hover {position:relative; z-index:200;}

/* keep the 'next' level invisible by placing it off screen. */
#menu ul, 
#menu li:hover ul ul, 
#menu li.over ul ul, 
#menu li:hover ul :hover ul ul,
#menu li:hover ul :hover ul :hover ul ul,
#menu li:hover ul :hover ul :hover ul :hover ul ul {display: none;}

#menu li:hover ul.sub,
#menu li.over ul.sub {display: block; position: absolute;top: 35px;left: -40px}
#menu li:hover ul.sub li,
#menu li.over ul.sub li {display:block; height:20px; position:relative; float:left; width:90px;}
#menu li:hover ul.sub li a,
#menu li.over ul.sub li a {border-left:3px solid #fff; border-right:0px solid #fff; border-top:0px solid #fff; border-bottom:0px solid #fff; display:block; font-size:11px; height:20px; width:87px; line-height:20px; text-indent:5px; color:#000; text-decoration:none; }
#menu li:hover ul.sub li a.fly,
#menu li.over ul.sub li a.fly {background:#fff url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/arrow.gif') no-repeat 80px 7px;}
#menu li:hover ul.sub li a:hover,
#menu li.over ul.sub li a:hover {background:#4ab; color:#fff;}
#menu li:hover ul.sub li a.fly:hover,
#menu li.over ul.sub li a.fly:hover {background:#4ab url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/arrow_over.gif') no-repeat 80px 7px; color:#fff}
#menu li:hover ul li:hover > a.fly,
#menu li.over ul li:hover > a.fly {background:#4ab url('http://i269.photobucket.com/albums/jj57/designteen-net/baixandolegal/arrow_over.gif') no-repeat 80px 7px; color:#fff} 

#menu li:hover ul li:hover ul,
#menu li.over ul,
#menu li:hover ul li:hover ul li:hover ul,
#menu li:hover ul li:hover ul li:hover ul li:hover ul,
#menu li:hover ul li:hover ul li:hover ul li:hover ul li:hover ul
{left:90px; top:-4px; background: #fff; padding:3px 0; border:1px solid #4ab; white-space:nowrap; width:93px; z-index:200; height:auto;}

</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
	navRoot = document.getElementById("menu");
		for (i=0; i<navRoot.childNodes.length; i++) {
			node = navRoot.childNodes[i];
				if (node.nodeName=="LI") {
					node.onmouseover=function() {
					this.className+=" over";
				}
			node.onmouseout=function() {
		this.className=this.className.replace
	(" over", "");
   }
   }
  }
 }
}
window.onload=startList;
</script>
<ul id="menu" id="topMenu">

	<li class="top">
		<a target="iframe" href="Index.html" id="topMenu" Title="Home Page" class="top_link"><span>Home</span></a>
	</li>

	<li class="top">
		<a href="#" id="Private" Title="Webmaster Access" class="top_link"><span class="down">Private</span></a>
		<ul class="sub">
			<li class="sub"><a target="iframe" href="Login.html">Login</a></li></li>
			<li class="sub"><a target="iframe" href="Logout.html">Logout</a></li></li>
			<li class="sub"><a target="iframe" href="General.html">Administration</a></li>
		</ul>
	</li>

	<li class="top">
		<a href="#" id="Downloads" Title="Categories" class="top_link"><span class="down">Downloads</span></a>
		<ul class="sub">
			<li class="sub"><a target="iframe" href="#">Softwares</a></li></li>
			<li class="sub"><a target="iframe" href="#">Filmes</a></li></li>
			<li class="sub"><a target="iframe" href="#">Games</a></li>
			<li class="sub"><a target="iframe" href="#">MP3</a></li>
			<li class="sub"><a target="iframe" href="#">Ebooks</a></li>
		</ul>
	</li>
	
	<li class="top">
		<a href="#" id="Contact" Title="Contact And Partnerships" class="top_link"><span class="down">Contact</span></a>
		<ul class="sub">
			<li class="sub"><a target="iframe" href="#">Send Message</a></li></li>
			<li class="sub"><a target="iframe" href="#">Partnerships</a></li></li>
		</ul>
	</li>

	<li class="top">
		<a href="#" id="Support" Title="Help And Support" class="top_link"><span class="down">Support</span></a>
		<ul class="sub">
			<li class="sub"><a target="iframe" href="#">Inform Link Off</a></li></li>
			<li class="sub"><a target="iframe" href="#">Orkut Community</a></li></li>
		</ul>
	</li>
Ai é só o menu... o resto basta você aplicar normalmente...

Veja que eu alterei linhas chaves.. as que tinham: li:hover, eu adicionei um li.over

Como essa:

#menu li:hover ul ul, 
#menu li.over ul ul,
Avisa...

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