Problema con selectores en listas y sublistas

Question

Hola a todos.

Estoy intentando realizar el típico menú desplegable con jquery usando el mínimo de id y clases. El HTML es este:

<pre lang='html4strict'><div id="segunda_cabecera">
    <ul id="topnav">  
<li><a href="#">Portada</a></li>
<li><a href="#">Monotemáticos</a>
<ul>
<li><a href="#">HTML</a> </li>
<li><a href="#">Javascritp</a> </li>
<li><a href="#">Ajax</a> </li>
</ul>
</li>
<li><a href="#">Secciones</a>
<ul>
<li><a href="#">Manuales</a> </li>
<li><a href="#">Programas</a></li>
</ul>
</li>
<li><a href="#">Bloging</a></li>
<li><a href="#">Comunidad</a></li>
<li><a href="#">Wiki</a></li>
<li><a href="#">RSS</a></li>

</div>
El código jquery es este (sólo lo he empezado):

<pre lang='javascript'>$(document).ready(function()
{
    $("#topnav > li").addClass("horizontal");//Con esto consigo que aparezca horizontal

    $("#topnav > li").mouseover(function(evento)//Aquí está el problema
    {
    $(this).css({"background-color": "black", "color": "white"});/*El color blanco no se muestra*/
    $(this).children("ul").slideDown();
    });
});
Lo que pretendo es que cuando pase el ratón por encima de un li principal, éste y sólo éste tenga color de fondo negro y de carácter blanco y se desplieguen las sublistas, pero la realidad es que con $("#topnav > li") también selecciono las sublistas y al desplegarse estas también tienen color de fondo negro. También tengo el problema de que el color del caracter no cambia a blanco. Se queda todo negro. ¿Alguien sabe cómo seleccionar un li sin seleccionar a sus hijos?. ¿Por qué no se ponen de color blanco las letras?.

Muchas gracias.