Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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 alguem 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
CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd%22)<html xmlns="[http://www.w3.org/1999/xhtml">](http://www.w3.org/1999/xhtml%22)
<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>--------------------------------------------------------------------------------------
Codigo CSS do Menu
CODE
.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 alguem 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.
Carregando comentários...