Dropdown menu horizontal - melhor maneira

Olá!

Estou desenvolvendo um site que terá um menú dropdown horizontal. Pesquisei bastante na Net e essa foi a única maneira que consegui fazê-lo funcionar proximo ao jeito que eu queria:

HTML:

<ul class="navmain">
<li><a href="#">Home</a></li>
<li><a href="#">Sobre o CEDM</a>
	<ul>
 <li><a href="#">Filosofia</a></li>
 <li><a href="#">Equipe</a></li>
	</ul>
</li>
<li><a href="#">Clínica</a>
	<ul>
 <li><a href="#">Experiência</a></li>
 <li><a href="#">Serviços</a></li>
 <li><a href="#">Avaliação</a></li>
 <li><a href="#">Tratamento</a></li>
	</ul>
</li>
<li><a href="#">Cursos</a>
	<ul>
 <li><a href="#">Experiência</a></li>
 <li><a class="dor_main" href="#">Formação Continuada em Dor</a></li>
 <li><a href="#">Cursos</a></li>
 <li><a href="#">Agenda</a></li>
 <li><a href="#">Inscrições</a></li>
 <li><a href="#">Ex-alunos</a></li>
	</ul>
</li>

etc...

.

.

.

.

CSS:

<style type="text/css">

.navmain {
margin:0;
padding:0;
list-style: none;
width:960px;
height:35px;
font-size:13px;
background:url(images/nav_fundo.jpg);
}

.navmain ul {

margin:0;
padding:0;
list-style-type:none;
}

.navmain li {

margin:0;
padding:0;
width: 120px;
float:left;

}

.navmain li ul {

position: absolute;
width: 120px;
left: -999em;
color:rgb(255,255,255);
background-color:#21245b;
}

.navmain li:hover ul {

left: auto;
}

.navmain a {

display: block;
}

.navmain li a {

color:#21245b;
}

.navmain li ul a {

color:#ffffff;
}

.navmain a:link {

display:block;
font: 0.95em Arial, Helvetica, sans-serif;
text-align:center;
padding:10px 8px 10px 8px;
text-decoration:none;
}

.navmain a:hover {

background:url(images/nav_fundob.jpg);
color:#FFFFFF;
}

sfHover = function() {
var sfEls = document.getElementById("navmain").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
	sfEls[i].onmouseover=function() {
 this.className+=" sfhover";
	}
	sfEls[i].onmouseout=function() {
 this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
	}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

</style>

Print Screen do resultado:

Clique aqui

Gostaria de saber se há um jeito melhor de fazer isso acontecer!

E se há como fazer com que o menú principal dos submenus que descem, fique azul escuro tb quando eu descer com o mouse para os submenus abaixo....Assim!

muito obrigada desde já a quem puder comentar!