Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
to tentando fazer um menu aqui,
html:
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="?pg=clientes">Clientes</a></li>
<li class="hover"><a href="">Trabalhos</a></li>
<ul>
<li><a href="?pg=cases">Cases</a></li>
<li><a href="?pg=embalagens">Embalagens</a></li>
<li><a href="?pg=internet">Internet</a></li>
<li><a href="?pg=news">News Letter</a></li>
<li><a href="?pg=alternativa">Mídia Alternativa</a></li>
<li><a href="?pg=eletronica">Mídia Eletrônica</a></li>
<li><a href="?pg=embalagens">Mídia Impressa</a></li>
</ul>
<li><a href="?pg=servicos">Serviços</a></li>
<li><a href="?pg=links">Links</a></li>
<li class="last"><a href="?pg=contato">Contato</a></li>
</ul>
css:
#menu {
float: right;
margin: 0;
padding: 0;
border-bottom: 1px solid #FF6600;
width: 490px;
border-radius: 15px;
}
#menu li{
list-style: none;
float:left;
height: 8px;
font-size: 11pt;
[b]vertical-align: middle;[/b]
border-right: 1px solid #BBB;
padding: 7px 0;
position: relative;
}
#menu ul {
position: absolute;
top: 30px;
left: 0;
width: 120px;
display: none;
background-color: #0066FF;
text-decoration: none;
font-size: 12pt;
text-align: left;
}
#menu li:hover ul {
font-size: 10pt;
display: block;
background-color: #FF6600;
}
#menu a{
color:#000;
text-decoration: none;
padding: 0px 15px 15px 15px;
margin-bottom: 10px;
float: left;
} color: #FF9F00;
} border-right: none;
}
#menu ul.align{
border-right: none;
border-bottom: 1px solid #FFFFFF;
font-size: 10px;
}
o caso é:
preciso alinhar o texto do menu principal no meio, e com vertical-align ñ consegui fazer...
e o sub-menu, so aparece no Ie
no Mozilla n...
oq to fazndo errado ?
beleza, alinhamento na vertical resolvido, agora, pq o sub-menu n aparece no Mozilla?
Veja, http://imasters.com.br/artigo/16195/css/centralizar_imagem_na_horizontal_e_vertical_com_css/..
Acho que isso e ajuda no teu problema, mas caso não resolva, tente alinhar usando padding mesmo, eu acho mais prático.. =)
entao, o alinhamento ta pronto, so falta o sub-menu aparecer no Mozilla !
=/
O seu HTML não está de acordo com o CSS.
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="?pg=clientes">Clientes</a></li>
<li class="hover"><a href="">Trabalhos</a></li>
<!-- A sua <ul> está dentro da <ul id="menu">, e não dentro da <li> que quer fazer o submenu. -->
<ul>
<li><a href="?pg=cases">Cases</a></li>
<li><a href="?pg=embalagens">Embalagens</a></li>
<li><a href="?pg=internet">Internet</a></li>
<li><a href="?pg=news">News Letter</a></li>
<li><a href="?pg=alternativa">Mídia Alternativa</a></li>
<li><a href="?pg=eletronica">Mídia Eletrônica</a></li>
<li><a href="?pg=embalagens">Mídia Impressa</a></li>
</ul>
<!-- A sua <ul> está dentro da <ul id="menu">, e não dentro da <li> que quer fazer o submenu. -->
<li><a href="?pg=servicos">Serviços</a></li>
<li><a href="?pg=links">Links</a></li>
<li class="last"><a href="?pg=contato">Contato</a></li>
</ul>
O correto seria:
<ul id="menu">
<li><a href="">Home</a></li>
<li><a href="?pg=clientes">Clientes</a></li>
<li class="hover">
<a href="">Trabalhos</a>
<ul>
<li><a href="?pg=cases">Cases</a></li>
<li><a href="?pg=embalagens">Embalagens</a></li>
<li><a href="?pg=internet">Internet</a></li>
<li><a href="?pg=news">News Letter</a></li>
<li><a href="?pg=alternativa">Mídia Alternativa</a></li>
<li><a href="?pg=eletronica">Mídia Eletrônica</a></li>
<li><a href="?pg=embalagens">Mídia Impressa</a></li>
</ul>
</li>
<li><a href="?pg=servicos">Serviços</a></li>
<li><a href="?pg=links">Links</a></li>
<li class="last"><a href="?pg=contato">Contato</a></li>
</ul>@André D. Molin
perfeito cara, era isso msmo...
fechei a <li> antes de inserir a <ul>
n tinha me atinado para isso..
^^
vlw ae..
TÓPICO RESOLVIDO !!!
use um line-height no lugar do vertical-align.