Ir para conteúdo

POWERED BY:

Arquivado

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

rvsrafael

[Resolvido] Menu Drop-Down menus-horizontal

Por , em Desenvolvimento frontend

Recommended Posts

rvsrafael    0

rvsrafael
Postado 

<HTML>
<HEAD>
 <TITLE>não funciona no fire</TITLE>

 <style>

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 110px;
	font:menu;
	font-size: x-small;
	  }

ul li {
	position: relative;
	}

li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

ul li a {
	display: block;
	text-decoration: none;
	color: #003399;
	background: #FFFFFF;
	padding: 5px;
	border: 2px solid #003399;
	border-bottom: 0;
	}

 /* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */


ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #003399;
	}

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

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

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


li a:hover {
   background: #003399;
   color: #FFFFFF;
   font: bold 100%;
				}
 </style>
 
 
 
 
<script language="javascript">
 over = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" over";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" over\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", over);
 </script>




</HEAD>
<BODY>

	<table cellpading="0" cellspacing="0" >
	<tr> <td width="150" height="360" valign="top">

	<ul id="nav">

	<li><a href="#">comercio</a>
	  <ul>
		<li><a href="#">Histórico</a></li>
		<li><a href="#">Administração</a></li>
			   <ul>
				   <li><a href="#">Congregação</a></li>
				   <li><a href="#">Diretoria Geral</a></li>
				   <li><a href="#">Departamentos</a></li>
				   <li><a href="#">Serviços Técnicos-Administrativos</a></li>
				   <li><a href="#">Organograma</a></li>
			   </ul>
		 <li><a href="#">Regime de Trabalho Docente </a></li>
		</ul>
	</li>

	<li><a href="#">Graduação</a>
	  <ul>
		<li><a href="#">funcionario</a></li>
			 <ul>
			   <li><a href="#">nivel 1</a></li>
			   <li><a href="#">nivel 2</a></li>
			   <li><a href="#">nivel 3</a></li>
			 </ul>
			  </ul>
	</li>

	</td>
   </tr>

</table>


</BODY>
</HTML>

 

bom galera o codigo acima abre perfeito por incrivel q pareca no IE, mas no Firefox - "naum foi possivel abri por exmplo"

FIREFOX

Graduação/funcionario/

abre apenas até o funcionario

 

IE

já nO IE abre perfeito

Graduação/funcionario/Nivel 1

Nivel 2

Nivel 3

 

será q alguem poderia me ajudar com alguma coisa!!!

 

trabalhei com base nesse tutorial

http://www.maujor.com/tutorial/ddownmenu-a.php#header

Compartilhar este post

Link para o post
Compartilhar em outros sites

Luiz Henrique    1

Luiz Henrique
Postado

Está errado;

 

<li><a href="#">Administração</a></li>

<ul>

<li><a href="#">Congregação</a></li>

<li><a href="#">Diretoria Geral</a></li>

<li><a href="#">Departamentos</a></li>

<li><a href="#">Serviços Técnicos-Administrativos</a></li>

<li><a href="#">Organograma</a></li>

</ul>

 

feche o </li> aqui de todos sub-níveis

 

 

 

<HTML>
<HEAD>
 <TITLE>não funciona no fire</TITLE>

 <style>

ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 110px;
	font:menu;
	font-size: x-small;
	  }

ul li {
	position: relative;
	}

li ul {
	position: absolute;
	left: 149px;
	top: 0;
	display: none;
	}

ul li a {
	display: block;
	text-decoration: none;
	color: #003399;
	background: #FFFFFF;
	padding: 5px;
	border: 2px solid #003399;
	border-bottom: 0;
	}

 /* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */


ul {
	margin: 0;
	padding: 0;
	list-style: none;
	width: 150px;
	border-bottom: 1px solid #003399;
	}

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

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

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; height: 1%; }
* html ul li a { height: 1%; }
/* End */


li a:hover {
   background: #003399;
   color: #FFFFFF;
   font: bold 100%;
				}
 </style>
 
 
 
 
<script language="javascript">
 over = function() {
	var sfEls = document.getElementById("nav").getElementsByTagName("LI");
	for (var i=0; i<sfEls.length; i++) {
		sfEls[i].onmouseover=function() {
			this.className+=" over";
		}
		sfEls[i].onmouseout=function() {
			this.className=this.className.replace(new RegExp(" over\\b"), "");
		}
	}
}
if (window.attachEvent) window.attachEvent("onload", over);
 </script>




</HEAD>
<BODY>

	<table cellpading="0" cellspacing="0" >
	<tr> <td width="150" height="360" valign="top">

	<ul id="nav">

	<li><a href="#">comercio</a>
	  <ul>
		<li><a href="#">Histórico</a></li>
		<li><a href="#">Administração</a></li>
			   <ul>
				   <li><a href="#">Congregação</a></li>
				   <li><a href="#">Diretoria Geral</a></li>
				   <li><a href="#">Departamentos</a></li>
				   <li><a href="#">Serviços Técnicos-Administrativos</a></li>
				   <li><a href="#">Organograma</a></li>
			   </ul>
		 <li><a href="#">Regime de Trabalho Docente </a></li>
		</ul>
	</li>

	<li><a href="#">Graduação</a>
	  <ul>
		<li><a href="#">funcionario</a></li>
			 <ul>
			   <li><a href="#">nivel 1</a></li>
			   <li><a href="#">nivel 2</a></li>
			   <li><a href="#">nivel 3</a></li>
			 </ul>
			  </ul>
	</li>

	</td>
   </tr>

</table>


</BODY>
</HTML>

 

bom galera o codigo acima abre perfeito por incrivel q pareca no IE, mas no Firefox - "naum foi possivel abri por exmplo"

FIREFOX

Graduação/funcionario/

abre apenas até o funcionario

 

IE

já nO IE abre perfeito

Graduação/funcionario/Nivel 1

Nivel 2

Nivel 3

 

será q alguem poderia me ajudar com alguma coisa!!!

 

trabalhei com base nesse tutorial

http://www.maujor.com/tutorial/ddownmenu-a.php#header

Compartilhar este post

Link para o post
Compartilhar em outros sites

rvsrafael    0

rvsrafael
Postado

<li><a href="#">comercio</a>

<ul>

<li><a href="#">Histórico</a></li>

<li><a href="#">Administração</a>

<ul>

<li><a href="#">Congregação</a></li>

<li><a href="#">Diretoria Geral</a></li>

<li><a href="#">Departamentos</a></li>

<li><a href="#">Serviços Técnicos-Administrativos</a></li>

<li><a href="#">Organograma</a></li>

</ul>

</li>

 

Luiz Henrique valeu msm Amigão....

deu certo acima esta a alteração q eu fiz e rodo perfeitamente!

 

abraço http://forum.imasters.com.br/public/style_emoticons/default/grin.gif

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