¿Problema con el css o la imagen?

[DoPeY-BBS]

Bien, yo quiero crear este menu el cual la sección de discografia contenga los eps y los albumes de la banda... es una web de una banda de mésica que quiero hacer.

Código HTML:

<ul>
        <div id="menu">
        <ul>
            <li class="current_page_item"><a href="#">Inicio</a></li>
            <li><a href="#">Biografia</a></li>
            <li><a href="#">Discografia</a></li>               
             <ul>
                    <li><a href="#">EP`s</a></li>
                <li><a href="#">Albumes</a></li>
             </ul>
            </li>
            <li><a href="#">Miembros</a></li>
            <li><a href="#">Conciertos</a></li>
            <li><a href="#">Contacto</a></li>
        </ul>
    </div>
    <!-- end #menu -->
 

Este el css

Código CSS:

/* Menu */
 
#menu {
    width: 940px;
    height: 63px;
    margin: 0 auto;
    padding: 0;
    background: url(images/img01.jpg) repeat-x left top;
}
 
#menu ul {
    margin: 0px 0px 0px 10px;
    padding: 12px 0px 0px 0px;
    list-style: none;
    line-height: normal;
}
 
#menu li {
    float: left;
}
 
#menu a {
    display: block;
    height: 26px;
    margin-right: 2px;
    margin-bottom: 10px;
    padding: 10px 20px 0px 20px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    border: none;
}
 
#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
    color: #FFFFFF;
}
 
#menu .current_page_item a {
    color: #FFFFFF;
    }
 

Miren la imagen del menu. necesito una ayuda lo mas pronto posible
http://www.freecsstemplates.org/preview/shadowed/

Gracias

[sanxuan]

El código que muestras no pasa la validación del W3C (http://validator.w3.org).
Eso quiere decir que no es correcto, y que no hay seguridad de que se pueda mostrar en el navegador.

Te marco en rojo donde están los errores.
<ul>
<div id="menu">
<ul>
<li class="current_page_item"><a href="#">Inicio</a></li>
<li><a href="#">Biografia</a></li>
<li><a href="#">Discografia</a></li>
<ul>
<li><a href="#">EP`s</a></li>
<li><a href="#">Albumes</a></li>
</ul>
</li>
<li><a href="#">Miembros</a></li>
<li><a href="#">Conciertos</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div> <!-- end #menu -->

El primer <ul> parece que se haya colado, ya que no tiene etiqueta de cierre.
El segundo bloque que te he marcado debería formar parte de un elemento <li>, pero sólo aparece la etiqueta final. Has de añadir la etiqueta de comienzo.
Prueba a corregir eso y vuelve a validar.

[DoPeY-BBS]

No entiendo lo que dices.. le agrego un <li> despues <ul>

<ul>
<li>
<li><a href="#">EP`s</a></li>
<li><a href="#">Albumes</a></li>
</ul>

Aun asi :(

Gracias por ayudarme...

[jomaruro]

Hola:

Compara tu código con este:

Código HTML:

<div id="menu">
    <ul>
        <li class="current_page_item"><a href="#">Inicio</a></li>
        <li><a href="#">Biografia</a></li>
        <li><a href="#">Discografia</a>
            <ul>
                <li><a href="#">EP`s</a></li>
                <li><a href="#">Albumes</a></li>
            </ul>
        </li>
        <li><a href="#">Miembros</a></li>
        <li><a href="#">Conciertos</a></li>
        <li><a href="#">Contacto</a></li>
    </ul>
</div>
 

Saludos.

[DoPeY-BBS]

Gracias, ahora esta mas claro pero mira ahora como lo pone



Lo quiero en horizontal

Aparentemente el css esta bien

Código CSS:

#menu {
    width: 940px;
    height: 63px;
    margin: 0 auto;
    padding: 0;
    background: url(images/img01.jpg) repeat-x left top;
}
 
#menu ul {
    margin: 0px 0px 0px 10px;
    padding: 12px 0px 0px 0px;
    list-style: none;
    line-height: normal;
}
 
#menu li {
    float: left;
}
 
#menu a {
    display: block;
        width: 99%;
    height: 26px;
    margin-right: 2px;
    margin-bottom: 10px;
    padding: 10px 20px 0px 20px;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    color: #FFFFFF;
    border: none;
}
 
#menu a:hover, #menu .current_page_item a {
    text-decoration: none;
    color: #FFFFFF;
}
 
#menu .current_page_item a {
    color: #FFFFFF;
    }
 

[jomaruro]

Hola:

Échale un vistazo a los ejemplos de menús desplegables de las FAQ's quizá te sirvan de ayuda.

Saludos.