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><a href="#">Institucional</a></li>  
                        <li><a href="#">Equipe</a>

                            <ul class="sub_subnav">
                                <li><a href="#">Conselho Administrativo</a></li>
                                <li><a href="#">Diretoria Executiva</a></li>
                                <li><a href="#">Conselho Fiscal</a></li>
                            </ul>

                        </li> 
                        <li><a href="#">Código de Ética</a></li>
                        <li><a href="#">Demonstrações</a></li>                      
                        <li><a href="#">Estatuto</a></li>  
                        <li><a href="#">Políticas</a></li>  
                        <li><a href="#">Regimentos</a></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><a href="#">Conta Corrente</a></li>  
                        <li><a href="#">Linhas de Crédito</a>

                            <ul class="sub_subnav">
                                <li><a href="#">Financiamento Veículos e outros</a></li>
                                <li><a href="#">Credito Retorno Parcelado</a></li>
                            </ul>

                        </li> 
                        <li><a href="#">Seguros</a>
                            <ul class="sub_subnav">
                                <li><a href="#">Vida</a></li>
                                <li><a href="#">Automóvel</a></li>
                                <li><a href="#">Residencial</a></li>
                                <li><a href="#">Vida Mulher</a></li>
                            </ul>                       
                        </li>
                        <li><a href="#">Soluções de Investimentos</a>
                            <ul class="sub_subnav">
                                <li><a href="#">Fundos de investimento (liquidez diária).</a></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;
}