等級3 <nav>不應該隱藏它應該

我將2級<nav>變成3級並遇到一些困難。等級3 <nav>不應該隱藏它應該

第三層顯示在哪裏和預測的，但是當「祖父母」懸停時，而不是我想顯示的項目的父項。

我一直在與CSS混戰一段時間，我無法讓它響應我的意願。

任何幫助表示讚賞。

有一個小提琴，因爲我的解釋可能有點缺乏。從小提琴

代碼：

#nav{ 
    background: #bada55; 
    width: 99%; 
    margin-top:-5px; 
} 

#nav ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    height: 40px; 
} 

#nav ul li{ 
    /*child elements positioned absolutley will be relative to this*/ 
    position: relative; 
    border-top: 1px solid #e9e9e9; 
    float: left; 

} 

#nav a{ 
    color: ghostwhite; 
    padding: 12px 0px; 
    /*fill hori space*/ 
    display: block; 
    text-decoration: none; 
/*apply transition to background property, taking 1s to change it 
*/ 
    transition:padding 1s, background 1s; 
    -moz-transition:padding 1s, background 1s; 
    -webkit-transition:padding 1s, background 1s; 
    -o-transition:padding 1s, background 1s; 

    font-family:tahoma; 

    font-size:13px; 
    text-transform:uppercase; 
    padding-left:20px; 
} 

/*hover pseduo class*/ 
#nav a:hover{ 
    /* 
    RGBA background for transparancy: 
    last number(0.05) is the transparency 
    */ 
    padding-left:35px; 
    background: RGBA(255,255,255,0.05); 
    color:#fff; 
} 

#nav ul li:hover ul{ 
    /*diplay when hovered*/ 
    display: block; 
} 

#nav ul ul{ 
    position: absolute; 
    left: 0px; 
    top: 40px; 
    border-top: 1px solid #e9e9e9; 
    display: none; 
    /*width: 304px;*/ 
    z-index: 1; 
} 

#nav ul ul li{ 
    width: 150px; 
    background: #f1f1f1; 
    border: 1px solid #e9e9e9; 
    border-top: 0; 
    /*float:left;*/ 

} 

#nav ul ul li a{ 
    color:#000000; 
    font-size:12px; 
    text-transform:none; 
} 

#nav ul ul li a:hover { 
    color:#929292; 
} 

/*3rd level...*/ 
#nav ul ul ul{ 
    position: absolute; 
    left: 150px; 
    top: 0px; 
    border-top: 1px solid #e9e9e9; 
    display: none; 
    /*width: 304px;*/ 
    z-index: 1; 
} 

#nav ul ul ul li{ 
    width: 150px; 
    background: #f1f1f1; 
    border: 1px solid #e9e9e9; 
    border-top: 0; 
} 

#nav ul ul ul li a{ 
    color:#000000; 
    font-size:12px; 
    text-transform:none; 
} 

#nav ul ul ul li a:hover { 
color:#929292; 
} 

#nav ul ul li:hover ul{ 
/*diplay when hovered*/ 
display: block; 
} 

<nav id = "nav"> 
    <ul> 
     <li> 
      <a href="#">1.1</a> 
      <ul> 
       <li> 
        <a href="#">1.1.1</a> 
        <ul> 
         <li><a href="#">1.1.1.a</a></li> 
         <li><a href="#">1.1.1.b</a></li> 
        </ul> 
       </li> 

       <li><a href="#">1.1.2</a></li> 
       <li><a href="#">1.1.3</a></li> 

      </ul> 
     </li> 
</ul>

來源

2013-07-30 null

變化

#nav ul li:hover ul { 
    /*diplay when hovered*/ 
    display: block; 
}

到

#nav ul li:hover>ul { 
    /*diplay when hovered*/ 
    display: block; 
}

注意額外的「>」

編輯：新增jsFiddler

來源

2013-07-30 11:50:01

輝煌謝謝合作！當它是該父母的孩子時，是否強制它僅顯示爲一個塊？ – null

是的，它強制「ul」元素是「li」元素的直接子元素 –

再次感謝，這是一個真正優雅的解決方案。我甚至沒有考慮過:( – null

只需添加這一段代碼它會爲你

#nav ul li:hover ul ul{ 
    /*diplay when hovered*/ 
    display: none; 
}

來源

2013-07-30 11:51:43 user2618352

等級3 <nav>不應該隱藏它應該

回答

相關問題