[Resolvido] Alinhar submenu a esquerda

[Hugo Moura 0]

Olá pessoal.

 

Antes de mais nada, muito prazer.

 

Fiz um menu em css com submenu e, depois de algumas tentativas e erros, consegui chegar muito próximo do resultado final. Agora estou com uma dúvida: preciso alinhar o submenu à esquerda e não consigo, de jeito nenhum. Tem como alguém me ajudar?

 

Subi uma imagem do menu para ilustrar melhor o que quero fazer:

 

http://img190.imageshack.us/img190/1586/menualinhamento.jpg

 

Vejam os códigos css e o html:

 

@charset "utf-8";
/* CSS Document */
#menu {
width:800px;
background-image:url(menu_superior.jpg);
height:59px;
}
#menu a{
text-decoration:none;
}
#menu ul{
list-style:none;
font-family:Verdana, Geneva, sans-serif;
margin:0;
padding:0;
}
#menu li ul{
display:none;
}
#menu li ul a{
color:#FFF;
font-size:10px;
}
#menu ul li{
display:block;
float:left;
}
#menu ul li a{
text-decoration:none;
}
#menu li a{
color:#00234d;
}
#menu ul li a:hover {
color:#C90;
}
#menu ul li:hover ul {display:block; position:absolute; top:30px;}

#menu ul li:hover ul li ul {display: block;}

.superior:hover{
background: url('menu_superior_seta.jpg') no-repeat bottom center;
}
.superior{
background-image:url(menu_superior.jpg);
font-weight:bold;
width:auto;
height:44px;
padding:15px 10px 0 10px;
margin:0;
font-size:11px;
display:block;
text-align:center;
}
.inferior{
background-image:url(menu_inferior.jpg);
height:24px;
padding:5px 10px 0 10px;
margin:26px 0 0 0;
}
.separador{
background:url('separador.jpg') no-repeat;
font-weight:bold;
width:auto;
height:44px;
padding:15px 10px 0 10px;
margin:0;
font-size:11px;
display:block;
text-align:center;
}
.separador_inf{
background-image:url(menu_inferior.jpg);
color:#FFF;
height:24px;
padding:5px 10px 0 10px;
margin:26px 0 0 0;
}
.seta{
background:url('seta.jpg') no-repeat;
font-weight:bold;
width:auto;
height:44px;
padding:15px 10px 0 10px;
margin:0;
font-size:11px;
display:block;
text-align:center;
}


<div id="menu">
<ul>
<li class="seta"> </li>
<li class="superior"><a href="#">Introdução</a></li>
<li class="separador"> </li>
<li class="superior"><a href="#">Institucional</a>
<ul>
<li class="inferior"><a href="#">Histórico Institucional</a></li>
<li class="separador_inf">|</li>
<li class="inferior"><a href="#">Realidade Institucional - estrutura física</a></li>
<li class="separador_inf">|</li>
<li class="inferior"><a href="#">Realidade Institucional - modelo de gestão</a></li>
</ul>
</li>
<li class="separador"> </li>
<li class="superior"><a href="#">Ética e Compromissos</a></li>
<li class="separador"> </li>
<li class="superior"><a href="#">Currículo</a></li>
<li class="separador"> </li>
<li class="superior"><a href="#">Considerações Finais</a></li>
</ul>
</li>
</ul>
</div>

 

Muito obrigado, pessoal!

[wdc_black_ 0]

troque

#menu li ul{
  display:none;
}

 

por

#menu li ul{
  display:none;
  left:40px;
}

 

e vá testando até chegar aonde você quer ;)

[Hugo Moura 0]

Olá, wdc_black.

 

É quase isso. O problema é que o menu tem que ser dinâmico. O conteúdo dele vai variar.

 

Ou seja, pode acontecer de ser um submenu localizado na "aba" introdução, entende?

 

Essa solução pede uma edição de css toda vez que o menu vá mudar.

 

Tem algum outro jeito?

 

Muito obrigado pela ajuda!

[wdc_black_ 0]

baaa amigo, eu não sei como fazer isso dinamicamente, acredito que só javascript poderia te ajudar, mas realmente nem sei por onde começar hehehe

quem sabe pede para os moderadores transferirem teu tópico para a seção de javascript, quem sabe o pessoal te ajuda la ;)

 

abraço

[Hugo Moura 0]

Ok, meu amigo.

 

Muito obrigado, de qualquer maneira, pela sua ajuda e atenção.

 

Moderadores, alguém pode me ajudar?

 

Sou Noobie... :)

[Hugo Moura 0]

Consegui resolver!

 

Obrigado pela ajuda wdc_black e ainda bem que não precisou de java...

 

Coloquei uma classe para o submenu e reorganizei o código css, que ficou assim:

 

@charset "utf-8";
/* CSS Document */
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
#menu {
width:800px;
background-image:url(menu_superior.jpg);
height:59px;
left:0px;
}
#menu a{
text-decoration:none;
}
#menu ul{
list-style:none;
font-family:Verdana, Geneva, sans-serif;
margin:0;
padding:0;
}
#menu li ul{
  display:none;
}
#menu li ul a{
color:#FFF;
font-size:10px;
}
#menu ul li{
display:block;
float:left;
}
#menu ul li a{
text-decoration:none;
}
#menu li a{
color:#00234d;
}
#menu ul li a:hover {
color:#C90;
}
#menu ul li:hover ul {display:block; top:25px;}

#menu ul li:hover ul li ul {display: block;}

.superior:hover{
background: url('menu_superior_seta.jpg') no-repeat bottom center;
}
.submenu {
height:55px;
background-image:url(menu_inferior_bg.png);
position:absolute;
left:0px;
width:800px;
}
.superior{
background-image:url(menu_superior.jpg);
font-weight:bold;
width:auto;
height:44px;
padding:15px 10px 0 10px;
margin:0;
font-size:11px;
display:block;
text-align:center;
}
.inferior{
background-image:url(menu_inferior.jpg);
height:24px;
padding:5px 10px 0 10px;
margin:26px 0 0 0;
}
.separador{
background:url('separador.jpg') no-repeat;
font-weight:bold;
width:auto;
height:44px;
padding:15px 10px 0 10px;
margin:0;
font-size:11px;
display:block;
text-align:center;
}
.separador_inf{
background-image:url(menu_inferior.jpg);
color:#FFF;
height:24px;
padding:5px 10px 0 10px;
margin:26px 0 0 0;
}
.seta{
background:url('seta.jpg') no-repeat;
font-weight:bold;
width:auto;
height:44px;
padding:15px 10px 0 10px;
margin:0;
font-size:11px;
display:block;
text-align:center;
}

 

E com o html, que é esse:

 

<div id="menu">
<ul>
<li class="seta"> </li>
<li class="superior"><a href="#">Introdução</a></li>
<li class="separador"> </li>
<li class="superior"><a href="#">Institucional</a>
<ul class="submenu">
<li class="inferior"><a href="#">Histórico Institucional</a></li>
<li class="separador_inf">|</li>
<li class="inferior"><a href="#">Realidade Institucional - estrutura física</a></li>
<li class="separador_inf">|</li>
<li class="inferior"><a href="#">Realidade Institucional - modelo de gestão</a></li>
</ul>
</li>
<li class="separador"> </li>
<li class="superior"><a href="#">Ética e Compromissos</a></li>
<li class="separador"> </li>
<li class="superior"><a href="#">Currículo</a></li>
<li class="separador"> </li>
<li class="superior"><a href="#">Considerações Finais</a></li>
</ul>
</li>
</ul>
</div>

 

Ficou assim:

 

 

Uploaded with ImageShack.us

 

Moderadores, podem fechar o tópico e espero que ele sirva para ajudar outros com o mesmo problema.

 

Abraços a todos!