Descer e alinhar texto a barra menu

[bier 0]

Bom, estou aprendendo css/html e estou com um problema, p vocês parecem ser fácil, mas p mim é muito complicado.

Enfim, então vamos ao problema:

 

 

Quero descer esse texto e separar eles, porém, não estou conseguindo

 

 

HTML

 

 

<ul id="menu2">
                	<li><a href="index.html">Sobre</a></li>
                    <li><a href="contato.html">Contato</a></li>
                    <li><a href="duvidas.html">FAQ</a></li>               
                	<li><a href="colabore.html">Colabore</a></li>
                </ul>

    <div id="main">
<div id="header">
<div id="logo"><br />
</div>
  <div style="position:absolute; top: 225;">
  <img src="images/segundo menu branco.png" /></div>
      <ul id="menu">
                	<li><a href="index.html">Home</a></li>
                    <li><a href="info.html">Cultivo</a></li>
                    <li><a href="noticias.html">Noticias</a></li>               
                	<li><a href="entretenimento.html">Entretenimento</a></li>
    </ul>
                 <div style="clear:both"></div>
</div><!-- final cabecalho-->

 

 

 

css

 

 

 

body { font-family: dense;
	background:url(../images/fundo.png)
}

.container {
    width: 1200;
    margin: 0 auto; 
}

'
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {margin: 0px; padding: 0px; }

#main {
	background:url(../images/primeiro%20menu.png) repeat-x;
}

#centro {
	background:url(../images/segundo%20menu%20branco.png) repeat-x;
	width: 2000px;
	height: 40px;
	background: #FFF;
	position:absolute;
	top: 34%;
	margin-left: -600px;
	margin-top: 22px;
	

}


#main .container {
	background: url(../images/fundo.png); 
}

#logo {
	background:url(../images/banner.png) no-repeat;
	height: 190px;
	width: 1200px;
	margin-left:auto;
	margin-right: auto;
}

#logo h1 {
    text-indent: -9999px;
}
 
#header {
    padding-top: 49px; 
}



ul#menu2 li a {
    font-size: 30px;
    color: #676666;
    text-decoration: none; 
}

ul#menu2 {
    list-style: none;
    padding-top: 0px; 
}
 
ul#menu2 li {
    float: left;
    padding-left: 30;
	padding-right: 75px; 
	line-height: 50px;
}

#content h2 {
	font-size: 30px;
}

#content h3 {
	font-size:20px;	
}

#menu li a {
	text-decoration: none;
	text-align: center;
	float: left;
	vertical-align:bottom;

}

ul#menu li a {
	font-size: 24px;
	color:#000;
	text-decoration: none;
}



ul#menu li {
	float: left;
	padding-left: 66px;
	padding-right: 66px;
	margin-top: -110px;
	letter-spacing: 2px;
}

ul#menu {
    list-style: none;
    padding-top: 55px; 

}

#menu {
	float: left;
	list-style-type:none;

} <!-- menu branco -->

 

Também queria sobrepor o texto em cima do menu "branco"

 

 

Enfim, se puderem ajudar, agradeceria, pois estou quebrando a cabeça pra tentar arrumar isso

 

 

Obrigado

 

 

Bom, consegui desjuntar as palavras tirando o

 

 

ul#menu {
    list-style: none;
    padding-top: 55px; 

}

 

 

 

Agora falta conseguir colocar em cima do menu branco

 

 

 

 

EDIT:

Bom, consegui alinhar na barra menu, porém, voltaram a ficar junto.

 

 

S.O.S

[W4y 2]

Só você acrescentar um:

 

ul#menu li {
	display: inline-block; 

	padding: 0 40px 0 40px;
	margin-top: -110px;
	letter-spacing: 2px;
}

display: inline-block; e removi o float: left; e fiz o padding da forma mais simples. Outra coisa seu código tem muita coisa desnecessária e repetitiva por exemplo:

 

#menu li a {
	text-decoration: none;
	text-align: center;
	float: left;
	vertical-align:bottom;

}

ul#menu li a {
	font-size: 24px;
	color:#000;
	text-decoration: none;
}

Você está aplicando dois estilos ao mesmo elemento poderia únilos:

 

#menu li a {
	text-decoration: none;
	text-align: center;
	font-size: 24px;
	color:#000;

}

E não tem necessidade do float e nem vertical-align, dê uma revisada.