Menu CSS e JavaScript sempre atraz das DIVS.

Romulo Quintanilha · Setembro 17, 2008

Pessoal peço a colaboração de todos caso posam melhorar o codigo assim como corrigir esse problema de ficar atraz das DIVS.

Na verdade pra que fica-se mais estilizado masi bonito, gostaria que fica-se assim, se alguém puder ajudar já que achei um pouco grosceiro:

Imagem de como poderia ficar os Sub-Menus

--------------------------------------------------------------------------------------

Imagem de fundo do Menu

--------------------------------------------------------------------------------------

Codigo HTML do Menu

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu DropDown Vertical</title>
<link href="css_menu.css" rel="stylesheet" type="text/css" />
</head>

<body>

<script type="text/javascript">

	function dropdown(obj,e, t) {

		if (t=="main") {

			if (e.type=="mouseover") {
				obj.parentNode.getElementsByTagName("ul").item(0).style.display = "block";
			} else {
				obj.parentNode.getElementsByTagName("ul").item(0).style.display = "none";
			}

		} else {

			if (e.type=="mouseover") {
				obj.style.display = "block";
			} else {
				obj.style.display = "none";
			}

		}

	}

</script>

<div id="navegacao" class="navegacao">
			  		<ul id="menu_superior">
						<li><a href="java script:void(0)">Pagina Inicial</a></li>
  						<li><a href="java script:void(0)" onmouseover="dropdown(this,event,'main')" onmouseout="dropdown(this,event,'main')">Menu 2</a>

							<ul class="subnav" onmouseover="dropdown(this,event,'sub')" onmouseout="dropdown(this,event,'sub')">

								<li><a href="#">Sub-Menu 1</a>	</li>
								<li><a href="#">Sub-Menu 2</a>	</li>
								<li><a href="#">Sub-Menu 3</a>	</li>
								<li><a href="#">Sub-Menu 4</a>	</li>
								<li><a href="#">Sub-Menu 5</a>	</li>
								<li><a href="#">Sub-Menu 6</a>	</li>
								<li><a href="#">Sub-Menu 7</a>	</li>
							</ul>	

						</li>
  						<li><a href="java script:void(0)" onmouseover="dropdown(this,event,'main')" onmouseout="dropdown(this,event,'main')">Menu 3</a>


							<ul class="subnav" onmouseover="dropdown(this,event,'sub')" onmouseout="dropdown(this,event,'sub')">

								<li><a href="#">Sub-Menu 1</a>	</li>
								<li><a href="#">Sub-Menu 2</a>	</li>
								<li><a href="#">Sub-Menu 3</a>	</li>
							</ul>							


						</li>

  						<li><a href="java script:void(0)">Menu 4</a>						

  						<li><a href="java script:void(0)" onmouseover="dropdown(this,event,'main')" onmouseout="dropdown(this,event,'main')">Menu 5</a>

							<ul class="subnav" onmouseover="dropdown(this,event,'sub')" onmouseout="dropdown(this,event,'sub')">

								<li><a href="#">Sub-Menu 1</a>	</li>
								<li><a href="#">Sub-Menu 2</a>	</li>
								<li><a href="#">Sub-Menu 3</a>	</li>
								<li><a href="#">Sub-Menu 4</a>	</li>
								<li><a href="#">Sub-Menu 5</a>	</li>
								<li><a href="#">Sub-Menu 6</a>	</li>
								<li><a href="#">Sub-Menu 7</a>	</li>


							</ul>							


						</li>
  						<li><a href="java script:void(0)">Menu 6</a>

						</li>
						<li><a href="java script:void(00)">Menu 7</a></li>
						<li><a href="java script:void(0)">Menu 8</a></li>
  					</ul>
</div>

		</div>
		<div id="conteudo" class="conteudo"> Somente para Teste</div>

</body>
</html>
[/codebox]

--------------------------------------------------------------------------------------

Codigo CSS do Menu

[codebox] .conteudo{
height:400px;
width: 500px; position: relative; left: 50%; margin-left: -250px;
position:relative;
background:blue;
margin-top:50px;
font: 20px, "Trebuchet MS"; color:#fff ;

}

.navegacao{
height:40px;
width: 760px; position: relative; left: 50%; margin-left: -380px;
position:relative;

}

/*BARRA DE NAVEGAÇÃO*/

#menu_superior {
list-style: none;
margin: 0;
padding: 0;

}

#menu_superior li {
float: left;
padding:0;
margin:0;

}

#menu_superior li a {
width:95px;
display: block;
padding: 0px 0px 0px 0px;
text-decoration: none;
color: #FFFFFF;
font: 12px Trebuchet Ms;
background: url(imagens/bg_menu2.jpg) top left #006699;
text-align: center;
padding:11px 0;

}

#menu_superior li a:hover {
width:95px;
text-decoration: none;
color: #FFFFFF ;
background: url(imagens/bg_menu2.jpg) bottom left #006699;

}

#menu_superior li {

position:relative;

}

#menu_superior ul.subnav {

display:block;
list-style:none;
position:absolute;
top:40px;
left:0px;
padding-left:0;
margin-left:0;
display:none;
z-index:2000;

}

#menu_superior ul.subnav li {

display:block;
margin-bottom:1px;

}

#menu_superior ul.subnav li a {

width:114px;
background:#00CC33;
color:#fff;
text-align:left;
padding:2px 10px;
display:block;

}

#menu_superior li a:hover {
width:95px;
color:#000000;
text-decoration: none;
color: #FFFFFF ;
background: url(imagens/bg_menu2.jpg) bottom left #000000;

}

/* FIM BARRA DE NAVEGAÇÃO */

Agradeço desde já sei que alguém vai me ajudar se não, nem viria nesse forum, mas como varias vezes obtive ajuda do pessoal aki estou de volta, fica meu muito obrigado galera.

Entrar

Menu CSS e JavaScript sempre atraz das DIVS.

Pergunta

Romulo Quintanilha

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades