Menu drop-down em CSS

Amigos, preciso de uma ajudinha fiz um menu em CSS, segue o código

#coluna01 {
	float:left;
	width:150px;
	margin-right:10px;
	margin-top:10px;
	overflow:hidden
}

#menu .menu01{ width:150px; height:30px; border-bottom:1px solid #ffffff; background:url(../img/bgmenu_teste.jpg) repeat-x;}
#menu .menu02 { width:150px; height:30px; border-bottom:1px solid #ffffff; background:url(../img/bg_menu02.jpg) repeat-x;}
#menu .mais { float:right; padding:0 5px; }

#menu a {color:#FFFFFF; height:30px; width:132px; line-height:30px; padding-left:22px; color:#fff; font-size:12px; font-weight:bold; text-decoration:none; background:url('../img/menu-seta.gif') no-repeat left center; }
#menu a:hover { text-decoration:underline; color:#ffffff; }

Na página inicial do site index.php eu fiz da seguinte maneira

<div id="coluna01">
 <ul id="menu">
 <li class="menu01"><a href="?p=conteudo&id=1">O Jornal</a></li>
 <li class="menu01"><a href="?p=noticias">+</span>Últimas Notícias</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=2">Editorial</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=3">Lente livre</a></li>
 <li class="menu01"><a href="?p=farol">60 segundos</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=5">Nota Dez</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=6">Nota Zero</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=7">Em pauta</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=8">Charge</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=9">Cidade</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=10">Geral</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=11">Política</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=12">Saúde</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=13">Economia</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=14">Esporte</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=15">Turismo</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=16">Giselle Normand</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=17">Geraldo Lara</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=18">Entretenimento</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=19">Variedades</a></li>
 <li class="menu01"><a href="?p=galeria">Fotos de Eventos </a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=20">Outros</a></li>
 <li class="menu01"><a href="?p=edicoes">Edição Digital</a></li>
 <li class="menu01"><a href="?p=materias_ver&materia=8">Pontos de distribuição</a></li>
 </ul>
</div>

após os seguintes links preciso inserir novos links, por exemplo:

<li class="menu01"><a href="?p=materias_ver&materia=18">Entretenimento</a></li>

*Dentro desse link inserir Coluna da TV e Notas da Fama

<li class="menu01"><a href="?p=materias_ver&materia=19">Variedades</a></li>

*Dentro desse outro link inserir Variedades e Água na Boca

Sei q dá pra fazer isso utilizando CSS, so nao sei como.

Se alguem poder me ajudar agradeço.

Flws