[Resolvido] Sub-menu

[- KbeçãO - 0]

pq meu sub-menu esta assim?

 

 

css

 

#menu {
       float: left;
       margin: 0;
       padding: 0;
	background: #006;
	width: 970px;

}
#menu li{
       list-style: none;
       float:left;
       border-right: 1px solid #FFF;
       padding: 7px 0;
       position: relative;
}
#menu ul {
       position: absolute;
       top: 30px;
       left: 0;
       width: 100px;
       display: none;
	background-color: #006;
	text-decoration: none;
	font: 12pt;
	text-align: left;
}
#menu li:hover ul {
       display: block;
	vertical-align: center;
}

#menu a{
       color:#FFF;
       text-decoration: none;
       padding: 0px 36px;
       float: left;
}
#menu a:hover{
       color: #FF0;
}
#menu .last{
       border-right: none;
}

 

html

 

<ul id="menu">
   <li><a href="?pg=empresa">Empresa</a>
        <ul>
           <li><a href="?pg=editorial">Editorial</a></li>
           <li><a href="?pg=responsabilidade-social">Resp.Social</a></li>              
        </ul>
    </li>
    <li><a href="?pg=clientes">Clientes</a></li>
    <li><a href="?pg=portifolio">Portifólio</a></li>
    <li><a href="?pg=certificados">Certificados</a></li>
    <li><a href="?pg=premios">Prêmios</a></li>
    <li><a href="?pg=parceiros">Parceiros</a></li>
    <li class="last"><a href="?pg=contato">Contato</a></li>
</ul>

[- KbeçãO - 0]

ja resolvi esse problema....

[Mário Monteiro 179]

Pode compartilhar a solução?

 

Pode ser útil para outros

[- KbeçãO - 0]

claro....

vamos la:

 

meu css antigo do menu estava assim:

 

#menu {
       float: left;
       margin: 0;
       padding: 0;
               background: #006;
               width: 970px;

}
#menu li{
       list-style: none;
       float:left;
       border-right: 1px solid #FFF;
       padding: 7px 0;
       position: relative;
}
#menu ul {
       position: absolute;
       top: 30px;
       left: 0;
       width: 100px;
       display: none;
               background-color: #006;
               text-decoration: none;
               font: 12pt;
               text-align: left;
}
#menu li:hover ul {
       display: block;
               vertical-align: center;
}

#menu a{
       color:#FFF;
       text-decoration: none;
       padding: 0px 36px;
       float: left;
}
#menu a:hover{
       color: #FF0;
}
#menu .last{ //aqui para tirar a ultima borda direita do menu
       border-right: none;
}

 

e assim o html antigo:

 

<ul id="menu">
   <li><a href="?pg=empresa">Empresa</a>
        <ul>
           <li><a href="?pg=editorial">Editorial</a></li>
           <li><a href="?pg=responsabilidade-social">Resp.Social</a></li>              
        </ul>
    </li>
    <li><a href="?pg=clientes">Clientes</a></li>
    <li><a href="?pg=portifolio">Portifólio</a></li>
    <li><a href="?pg=certificados">Certificados</a></li>
    <li><a href="?pg=premios">Prêmios</a></li>
    <li><a href="?pg=parceiros">Parceiros</a></li>
    <li class="last"><a href="?pg=contato">Contato</a></li>
</ul>

assim persistia o erro...

agora meu novo html...

 

<ul id="menu">
   <li><a href="?pg=empresa">Empresa</a>
        <ul>
           <li class="align"><a href="?pg=editorial">Editorial</a></li>//criei mais duas classes para esses 2 sub menus
           <li class="align2"><a href="?pg=resp_social">Resp.Social</a></li>              
        </ul>
    </li>
    <li><a href="?pg=clientes">Clientes</a></li>
    <li><a href="?pg=portifolio">Portifólio</a></li>
    <li><a href="?pg=certificados">Certificados</a></li>
    <li><a href="?pg=premios">Prêmios</a></li>
    <li><a href="?pg=parceiros">Parceiros</a></li>
    <li class="last"><a href="?pg=contato">Contato</a></li>
</ul>

 

e aqui o novo css:

 

#menu {
       float: left;
       margin: 0;
       padding: 0;
	background: #006;
	width: 970px;

}
#menu li{
       list-style: none;
       float:left;
       border-right: 1px solid #FFF;
       padding: 7px 0;
       position: relative;
}
#menu ul {
       position: absolute;
       top: 30px;
       left: 0;
       width: 95px;
       display: none;
	background-color: #0066FF;
	text-decoration: none;
	font: 12pt;
	text-align: left;
}
#menu li:hover ul {
       display: block;

}

#menu a{
       color:#FFF;
       text-decoration: none;
       padding: 0px 36px;
       float: left;
}
#menu a:hover{
       color: #FF0;
}
#menu .last{
       border-right: none;
}

#menu .align{ //alinhamento do <li> editorial

margin-left: -35px;
border-right: none;
border-bottom: 1px solid #FFFFFF;

}
#menu .align2{ //alinhamento do <li>resp_social 

margin-left: -50px;
border-right: none;

}

[- KbeçãO - 0]

e o resultado final: