Problema con menú desplegable

[sergi_multimedia]

Hola a todos, he creado un menú desplegable, y el menú está correctamente, el problema es que me aparece debajo de la capa de container.

He provado de poner al container z-index: 1; y al header z-indez: 2, pero no sucede nada, y claro el submenú no se puede ver ya que está debajo.

Aquí tenéis la web:

http://sergibeltran.com/jim3/

El código HTML:

Código HTML:

<nav>
                <ul>
                    <li><a href="#">CONTACT</a></li>
                    <li><a href="#">ARTIST</a></li>
                    <li><a href="#">ABOUT</a></li>
                    <li><a href="#">PRODUCTS</a>
                        <ul>
                            <li><a href="#">INSTRUMENT CABLES</a></li>
                            <li><a href="#">PATCH CABLES</a></li>
                            <li><a href="#">SPEAKER CABLES</a></li>
                        </ul>
                    </li>
                    <li><a href="#">HOME</a></li>
                </ul>
            </nav>
 

Y el código CSS:

Código CSS:

nav ul {
    padding: 0;
    list-style-type: none;
    float: left;
    margin: 10px 0.4% 0 0;
    width: 77%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 52px;
}
 
nav ul li {
    display: block;
    text-align: center;
    float: right;
    line-height: 2.2em;
    font-family: 'Marcellus SC', serif;
    font-size: .95em;
    margin: 0 0 0 5%;
    width: 15%;
}
 
nav li a {
    display: block;
    text-decoration: none;
    color: #2c455b;
    background-color: #f3f3f3;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, .5);
    box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, .5);
    text-shadow: 1px 1px 1px rgba(000,000,000,0.2);
}
 
nav ul li a:hover {
    background-color: #1f3948;
    color: #e7e5e5;
}
 
nav ul li ul {
    padding: 0;
    margin: 0 0 0 -50%;
    width: 200%;
    height: 150px;
    z-index: 2;
}
 
nav ul li ul li {
    display: none;
    width: 100%;
    float: left;
    margin: 10px 0 0 0;
}
 
nav ul li:hover ul li {
    display: block;
}
 

[ArturoGallegos]

tu problema esta aquí

header {
width: 100%;
overflow:hidden;
margin: 0 0 1.5% 0;
}

deberias solo colocar

Código CSS:

header {
    width: 100%;
    position:relative;
    z-index:5;
    margin: 0 0 1.5% 0;
}
 

y ya con eso funcionara bien

[sergi_multimedia]

Muchas gracias Ag666, como puedes ver ahora ya funciona correctamente, pero me ha surgido otro problema, cuando pasas el cursor por encima de los los botones que están escondidos pues se activan.

Sabes como puedo solucionar eso?

un saludo y muchas gracias ;)

[sergi_multimedia]

SOLUCIONADO.

Al final encontré con la solución, tuve que meter algo más de código en el css, en negrita os pongo he escrito la palabra "AÑADIDO!" para que veáis lo que he puesto para que funcione.

Código CSS:

nav ul {
    padding: 0;
    list-style-type: none;
    float: left;
    margin: 0;
    width: 77%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: 52px;
}
 
nav ul li {
    display: block;
    text-align: center;
    float: right;
    line-height: 2.2em;
    font-family: 'Marcellus SC', serif;
    font-size: 1em;
    margin: 0 0 0 5%;
    width: 15%;
}
 
nav li a {
    display: block;
    text-decoration: none;
    color: #2c455b;
    background-color: #e9e8e8;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    -webkit-box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, .5);
    box-shadow:  0px 2px 3px 0px rgba(0, 0, 0, .5);
    text-shadow: 1px 1px 1px rgba(000,000,000,0.2);
}
 
nav ul li a:hover {
    background-color: #1f3948;
    color: #e7e5e5;
}
 
nav ul li ul {
    padding: 0;
    margin: 0 0 0 -50%;
    width: 200%;
    height: 150px;
    z-index: 2;
    display: none; /*** AÑADIDO!!! ***/
}
 
nav ul li ul li {
    display: none;
    width: 100%;
    float: left;
    margin: 10px 0 0 0;
}
 
nav ul li:hover ul li {
    display: block;
}
 
nav ul li:hover ul {
    display: block /*** AÑADIDO! ***/
}
 

Aquí podéis ver como ha quedado ;)

http://sergibeltran.com/jim3/#

Gracias por la ayuda ;)