Menu Horizontal

[juandedios]

Hola, estoy en un dilema, ya he hecho varios menus horizontales de la forma como pondre abajo, pero ahora no me sale, no se ve nada en la pagina, dejo el codigo para que lo revisen, quizas hay algo que estoy haciendo mal.

Código HTML:

<div id="menu">
            <ul id="navigation">
                <li><a id="home" href="#"></a></li>
                <li><a id="services" href="#"></a></li>
                <li><a id="limousine" href="#"></a></li>
                <li><a id="contact" href="#"></a></li>
            </ul>
        </div><!-- End of menu -->
 

aqui el CSS

Código CSS:

/* menu */
div#menu {
    width: 686px;
    height: 38px;
    margin-top: 10px;
    background: transparent url(../images/menu-background.jpg) repeat-x top left;
}
 
ul#navigation {
    height: 38px;
}
 
ul#navigation li {
    float: left;
    list-style: none;
}
 
ul#navigation li a {
    height: 38px;
}
 
ul#navigation li a#home {
    width: 92px;
    background-image: url(../images/menu-home.jpg);
    background-repeat: no-repeat;
    background-position: top;
}
 
ul#navigation li a#services {
    width: 120px;
    background-image: url(../images/menu-services.jpg);
    background-repeat: no-repeat;
    background-position: top;
}
 
ul#navigation li a#limousine {
    width: 126px;
    background-image: url(../images/menu-limousine.jpg);
    background-repeat: no-repeat;
    background-position: top;
}
 
ul#navigation li a#contact {
    width: 138px;
    background-image: url(../images/menu-contact.jpg);
    background-repeat: no-repeat;
    background-position: top;
}