Menú con 2 niveles desaparece el fondo.

y chicas!

He hecho un menú CSS, con 2 subniveles. El segundo nivel funciona correctamente. Pero cuando algunos de estos menús de segundo nivel tienen un submenú, el fondo de este desaparece …

Aquí está trabajando ejemplo con el problema.

Si vas al menú: “PARA VOCÊ” y pasas “LINHAS DE CRÉDITO” ves el problema …

Este es mi código HTML:

 

Y ahora, el CSS:

 #menu_principal{ bottom:0; position:relative; margin:0 auto; width:980px; height:35px; font-family:Arial, Helvetica, sans-serif; font-size:12px; background-image:url(imagens/menu_bg.gif); background-position:50% 0; background-repeat:no-repeat no-repeat; } .wrap { clear:both; width:100%; } .clearfix{ display:block; } ul.topnav { float:left; margin:0; padding:0; } ul.topnav { list-style-image:initial; list-style-position:initial; list-style-type:none; } ul.topnav li { background-image:url(imagens/sep.gif); background-position:100% 0; background-repeat:no-repeat no-repeat; cursor:pointer; display:block; float:left; height:35px; margin:0; padding:0; cursor:pointer; } ul.topnav li a { color:#FFFFFF; display:block; font-family:'Trebuchet MS', Arial, Helvetica, sans-serif; font-weight:bold; height:35px; margin:0; padding-bottom:0; padding-left:15px; padding-right:15px; padding-top:0; text-decoration:none; text-transform:uppercase; } ul.topnav span.menu-title { text-shadow:#111111 0 1px 0; } ul.topnav span.menu-title { display:block; font-size:110%; padding-top:8px; } ul.topnav li a.first-item { border-left-color:initial; border-left-style:initial; border-left-width:0; } ul.topnav li:hover, ul.topnav li a.active{ background-image:url(imagens/bg_itens_menu.gif); background-position:-15px -48px; } ul.topnav li a.active.first-item { background-position:-403px -48px; } ul.topnav li ul.subnav { list-style: none; background: #333; margin: 0; padding: 0; display: none; width: 200px; border: 1px solid #111; position: absolute; } ul.topnav li:hover ul.subnav{ display: block; padding: 0; width: 200px; } ul.topnav li ul.subnav li{ margin: 0; padding:0; border-top: 1px solid #252525; border-bottom: 1px solid #444; width: 200px; } ul.topnav li ul.subnav li a{ margin-top:8px; color: #fff; height:35px; } ul.topnav li ul.subnav li:hover{ text-shadow:#111111 0 1px 0; } ul.topnav li ul.subnav li ul.sub_subnav{ list-style: none; left:201px; top:-45px; margin:0; padding:0; display:none; width:300px; border:1px solid #111; background-color: #333333; position:relative; } ul.topnav li ul.subnav li:hover ul.sub_subnav{ display: block; } ul.topnav li ul.subnav li ul.sub_subnav li{ margin: 0; padding:0; border-top: 1px solid #252525; border-bottom: 1px solid #444; width: 300px; } 

¡gracias por la ayuda!

Elimine el float de su .sub_subnav li . Escribe así:

 ul.topnav li ul.subnav li ul.sub_subnav li { float: none; } 

O

Puedes escribir así:

 ul.topnav > li{ float:left; } 

Tiene un flotador configurado a la izquierda en ul.topnav li , esto debería configurarse solo en ul.topnav > li

PD: no necesitas clases subnav o sub_subnav ya que puedes usar los selectores css para manejar esto