Menú basado en un listado

Bueno, recien empezé a rediseñar mi sitio, para lo que quize hacer un menú con imágenes en lugar de texto, para ello había pensado en hacerlo con div's, pero me di cuenta que no podía hacer un rollover porque necesitaba usar el a:hover, y para eso tenía que ser un enlace; por eso lo cambié a un listado:

Código HTML :

    <ul id="nav">
        <li class="home"><a href="#">Home</a></li>
        <li class="tutoriales"><a href="#">Tutoriales</a>
        <li class="recursos"><a href="#">Recursos</a></li>
        <li class="acercade"><a href="#">Acerca de</a></li>
        <li class="contacto"><a href="#">Contacto</a></li>
    </ul>

Cada elemento de la lista se muestra como block, no como el texto, el rollover el demás ya lo logré, el problema es que no se como hacerle para que los elementos de la lista se vayan hacia la derecha en lugar de irse hacia abajo.

Gracias de antemano

Bueno, ya encontré la solución, solo no recordaba bien como era.

Aquí mismo encontré la respuesta:
Crear menus de navegación en CSS usando listas

Se debe establecer al valor float como left para asi evitar el salto de línea, pero la clase sería así:

Código :

#nav li{
    float: left;
}

Y yo la estaba colocando así:

Código :

#nav {
    float: left;
}

Es decir, aplicaba el atributo a nav en lugar de los elementos de nav

Gracias.