[Resolvido] vertical-align

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;
}

#menu a:hover{

 color: #FF9F00;
}

#menu .last{

 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 ?