Menu with 2 levels disapear the background - html

Question

and girls!
i have make a CSS menu, with 2 sub-level. The second level works properly. But when some of these second level menu has a sub-menu, the background of this disapear....
Here is working example with the problem
If you go to the menu: "PARA VOCÊ" and hover "LINHAS DE CRÉDITO" you see the problem...
this is my HTML Code:
<div id="menu_principal" class="wrap">
<div class="inner clearfix">
<ul id="ja-cssmenu" class="clearfix topnav">
<li class="active">
<a href="http://www.sicoobes.net/" class="menu-item0 active first-item" id="menu1" title="Principal">
<span class="menu-title">PRINCIPAL</span>
</a>
</li>
<li class="havechildmenu-item1">
<a href="/index.php/o-sicoob" class="menu-item1 haschild" id="menu54" title="O Sicoob">
<span class="menu-title">O SICOOB</span>
</a>
<ul class="subnav">
<li>Institucional</li>
<li>Equipe
<ul class="sub_subnav">
<li>Conselho Administrativo</li>
<li>Diretoria Executiva</li>
<li>Conselho Fiscal</li>
</ul>
</li>
<li>Código de Ética</li>
<li>Demonstrações</li>
<li>Estatuto</li>
<li>Políticas</li>
<li>Regimentos</li>
</ul>
</li>
<li class="havechildmenu-item1">
<a href="/index.php/o-sicoob" class="menu-item1 haschild" id="menu54" title="O Sicoob">
<span class="menu-title">PARA VOCÊ</span>
</a>
<ul class="subnav">
<li>Conta Corrente</li>
<li>Linhas de Crédito
<ul class="sub_subnav">
<li>Financiamento Veículos e outros</li>
<li>Credito Retorno Parcelado</li>
</ul>
</li>
<li>Seguros
<ul class="sub_subnav">
<li>Vida</li>
<li>Automóvel</li>
<li>Residencial</li>
<li>Vida Mulher</li>
</ul>
</li>
<li>Soluções de Investimentos
<ul class="sub_subnav">
<li>Fundos de investimento (liquidez diária).</li>
</ul>
</li>
</ul>
</li>
<li class="havechildmenu-item1">
<a href="/index.php/o-sicoob" class="menu-item1 haschild" id="menu54" title="O Sicoob">
<span class="menu-title">PARA SUA EMPRESA</span>
</a>
</li>
</ul>
</div>
</div>
and now, the 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;
}
thanks for help!

Answer 1

Remove float from your .sub_subnav li. Write like this:
ul.topnav li ul.subnav li ul.sub_subnav li {
float: none;
}
OR
you can write like this:
ul.topnav > li{
float:left;
}

Answer 2

You have a float set to left on ul.topnav li, this should be set only on ul.topnav > li
PS : you don't need subnav or sub_subnav classes since you can use css selectors to handle this