Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Assim, eu estou usando um menu em sanfona (aqueles que tu clica na opção do menu, e o menu "abre" mostrando o conteúdo).
O problema é que dentro de uma opção do menu, eu preciso por um submenu NORMAL a esquerda e o conteúdo a direita, mas não estou conseguindo, pois quando uso o float:left para o submenu e o float:right para o conteúdo, ao clicar na opção do menu para abrir essa sanfona fica bugada, ou seja, ela abre mas volta pro lugar sozinha, ficando o seu conteúdo por cima das outras opções do menu.
Pra entenderem melhor, eu postei em http://www.19s.com.br/percap/index3.html
o código é o seguinte:
<!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">](http://www.w3.org/1999/xhtml)
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css"> margin:0;
padding:0;
list-style:none;
} font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size: 14px;
/*overflow-x:hidden;*/
}
#basic-accordian{
width:100%;
position:relative;
margin-top:-10px;
text-align:center;
}
.accordion_headings{
color:#FFFFFF;
border:1px solid #18333A;
cursor:pointer;
width:100% -1px;
height:35px;
text-align:center;
}.accordion_headings:hover{
background:#00CCFF;
}
.empresa{
background:#6CA8B5;
}
.abraSuaConta{
background:#3090A6;
}
.assessoria{
background:#148CA8;
}
.produtos{
background:#076980;
}
.cursos{
background:#6CA8B5;
}
.educacional{
background:#3090A6;
}
.negociacao{
background:#148CA8;
}
.contato{
background:#076980;
}
.menu_interno{
padding:5px;
color:#FFFFFF;
border:1px solid #18333A;
cursor:pointer;
font-size:11px;
color:#FFF;
width:30%;
height:16px;
text-align:right;
}
.div_interno{
color:#FFFFFF;
width:30%;
text-align:justify;
float:right;
margin-right:37%;
}
.menu_interno_escuro{
background-color:#076980;
}
.menu_interno_claro{
background-color:#148CA8;
} background:#00CCFF;
}
</style>
<script src="jquery-1.2.1.min.js" type="text/javascript"></script>
<script src="menu.js" type="text/javascript"></script>
<script type="text/javascript">
function centraliza(){
var wTela = screen.width;
var wPic = 1847;
if(wPic > wTela){
var wDif = wPic - wTela;
window.scrollTo(wDif/2,0);
}
}
</script>
</head>
<body onload="centraliza();">
<center>
<table height="100%" width="100%">
<tr>
<td ><img src="cabecalho.jpg" /></td>
</tr>
<tr>
<td>
<div id="basic-accordian">
<ul id="menu">
<li class="empresa">
<div class="accordion_headings" >Empresa</div>
<ul style="columns-count=2" >
<div class="div_interno">
texto texto texto texto texto texto texto texto texto texto texto texto<br />
texto texto texto texto texto texto texto texto texto texto texto texto<br />
texto texto texto texto texto texto texto texto texto texto texto texto<br />
texto texto texto texto texto texto texto texto texto texto texto texto<br />
texto texto texto texto texto texto texto texto texto texto texto texto<br />
texto texto texto texto texto texto texto texto texto texto texto texto<br />
texto texto texto texto texto texto texto texto texto texto texto texto<br />
texto texto texto texto texto texto texto texto texto texto texto texto<br />
texto texto texto texto texto texto texto texto texto texto texto texto<br />
texto texto texto texto texto texto texto texto texto texto texto texto<br />
</div>
<li class="menu_interno menu_interno_claro"
onclick="document.getElementById('empresa_apresentacao').style.display='block'">Apresentação</li>
<li class="menu_interno menu_interno_escuro" >Diferencial</li>
<li class="menu_interno menu_interno_claro">Visão, Missão e Valores</li>
<li class="menu_interno menu_interno_escuro">Parcerias</li>
</ul>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td ><img src="rodape.jpg" style="margin-top:-2px"/></td>
</tr>
</table>
</center>
</body>
</html>Carregando comentários...