menu se sobrepone

[chumy_]

Estimados, buenas noches...

Estoy modificando una pagina que fue hecha en wordpress, y la verdad me tiene de cabeza...

He logrado modificar los menú, ningún problema, pero al poner un tercer nivel este me aparece sobre el segundo nivel, y la verdad es que el CSS no es algo que se me mucho...

Estos son los codigos de la pagina ( esta es la pagina para que vean el error http://www.tattoo69.cl)

div del menu

Código PHP:

 <div id="access"> 
<div class="menu"> 
 
<?php  
    wp_nav_menu( array(  
        'theme_location' => 'header-menu' 
     ) );  
?> 
 
 
</div> 
</div>  

y aqui esta la grande...

Código PHP:

  #access { 
    background: none repeat scroll 0 0 #333333; 
    border-bottom: 1px solid #666666; 
    border-top: 1px solid #666666; 
    font: 1em tahoma,verdana; 
    height: 43px; 
    margin: auto; 
    padding: 0; 
    text-align: left; 
    width: 100%; 
} 
#access .menu-header, div.menu { 
    font-size: 13px; 
    margin: auto; 
    position: relative; 
    width: 1140px; 
} 
#access .menu-header ul, div.menu ul { 
    list-style: none outside none; 
    margin: 0; 
} 
#access .menu-header li, div.menu li { 
    border-right: 1px solid #400000; 
    float: left; 
    font-family: Arial; 
    font-size: 13px; 
    font-weight: bold; 
    min-height: 43px; 
    overflow: visible; 
    position: relative; 
    text-align: center; 
} 
#access a { 
    color: #FFFFFF; 
    display: block; 
    font-family: 'Oswald',sans-serif; 
    font-size: 17px; 
    font-weight: 300; 
    line-height: 43px; 
    padding: 0 20px; 
    text-decoration: none; 
    text-shadow: 1px 2px 2px #000000; 
    text-transform: uppercase; 
} 
#access ul ul { 
    background: none repeat scroll 0 0 #000000; 
    display: none; 
    float: left; 
    left: 0; 
    padding-bottom: 22px; 
    position: absolute; 
    top: 43px; 
    z-index: 99999; 
} 
#access ul ul li { 
    border: medium none; 
    font-size: 12px; 
    font-weight: normal; 
    height: 0 !important; 
    line-height: 12px; 
    margin: 0; 
    min-height: 28px !important; 
    min-width: 175px; 
    padding-left: 16px; 
    text-align: left; 
} 
#access ul ul a { 
    height: auto; 
    line-height: 23px; 
    padding: 10px; 
    width: 175px; 
} 
#access ul ul a:hover { 
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0) !important; 
    height: auto; 
    line-height: 23px; 
    padding: 10px; 
} 
#access li:hover > a, #access ul ul *:hover > a { 
    background: none repeat scroll 0 0 #000000; 
    color: #FFFFFF; 
} 
#access ul li:hover > ul { 
    display: block; 
} 
#access ul ul li a { 
    display: block; 
} 
#access ul ul li a:hover { 
    color: #FF0000 !important; 
} 
#access ul li.current_page_item > a, #access ul li.current-menu-ancestor > a, #access ul li.current-menu-item > a, #access ul li.current-menu-parent > a { 
    color: #FFFFFF; 
} 
* html #access ul li.current_page_item a, * html #access ul li.current-menu-ancestor a, * html #access ul li.current-menu-item a, * html #access ul li.current-menu-parent a, * html #access ul li a:hover { 
    color: #FFFFFF; 
}  
   

Alguna idea de por donde pueda ir el problema? o el codigo CSS es otro, y no el que aparace ahi?

[martinmiranda90]

Hola!. El problema creo que esta en #access ul ul, ya que estas aplicando los mismo estilos de posicionamiento al menu de segundo nivel y al de tercero, con lo cual te salen sobreexpuestos.
Intenta ponerle otro nombre de clase diferente y tratarlos como tal.
Saludos.

[chumy_]

disculpa, como comenaba, no soy perito para nada en css, me podrias guiar por favor

[chumy_]

aaaaah, y no puedo cambiar las clases, o por lo menos no se como hacerlo con wordpress...

[chumy_]

hice este cambio (lo agregue), segun estuve investigando... pero nada ¬¬

Código PHP:

  #access ul ul li ul{
       display: none;  
    margin-left:-1000px        
}

#access ul ul li:hover ul{
    background-position:bottom;
    display: block;
    background: black;  
    position:absolute;
    padding: 0px;
    text-align: left;
    margin-left:0px       
}