Menu Horizontal com SubMenuVertical

Fala Pessoal tenho o meno horizontal que já estou fazendo normalmente...funciona bem, preciso implementar os submenus verticais mas nos exemplo q vi nao consigo o menu desalinha todo...

CSS

.BackMenu
{

 Height: 32px;
 background:#B6E5F7; /* browsers sem suporte a css3 */
 background: -webkit-gradient(linear, left top, left bottom, from(#B6E5F7), to(#FFFFFF));/* webkit browsers */
 background: -moz-linear-gradient(top, #B6E5F7, #DEF2FD, #FFFFFF);/* firefox3.6+ */
 filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#B6E5F7', EndColorStr='#FFFFFF');/* IE */
}

#menu ul
{

 line-height:25px;
 padding:0px;
 margin:0px;
float: left;
width: 100%;
list-style:none;
}

#menu ul li { display: inline; }
#menu ul li a {

color: #333;
text-decoration: none;
padding: 2px 10px;
float:left;
}

#menu ul li a:hover
{

 text-decoration:underline;
}

HTML

<div><span id="menu"><div class="BackMenu"><div id="menu"><ul><li><a href="http://localhost/portal_clinica/link.asx" target="_self">Agenda</a></li><li><a href="http://localhost/portal_clinica/link.asx" target="_self">Paciente</a></li></ul></div></div><div class="classConfiguracoes"><a class="linkConf" href="http://localhost/portal_clinica/Configuracoes/Agenda" target="_self">Configurações</a></div></span></div>