與2級菜單disapear背景

Question

和女孩！

我已經做了一個CSS菜單，2個子級別。第二級正常工作。但是，當一些二級菜單中有一個子菜單，這disapear的背景....

Here是工作的問題

例如如果你去到菜單：「PARA VOCE」和懸停 「的linhas信貸銀行」 你看這個問題？

這是我的HTML代碼：

<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> 

而現在，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; 
} 

感謝您的幫助！

Answer 1

從您的.sub_subnav li中刪除float。像這樣寫：

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

OR

，你可以這樣寫：

ul.topnav > li{ 
float:left; 
} 

Answer 2

你有一個浮動設置爲留在ul.topnav li，這應該只在ul.topnav > li

設置PS：你不需要subnav或sub_subnav類，因爲你可以使用css選擇器來處理這個