創建三級css手風琴菜單

我創建了一個兩級CSS手風琴菜單see here。我現在試圖嘗試創建第三個層次。我對圖層的css嵌套有輕微的自己。下面的例子是我假設它應該是。有誰知道正確的嵌套方法。創建三級css手風琴菜單

#main-nav li ul a:hover:before, .subMenu li ul a:hover:before { 
    content: ""; 
    display: block; 
    width: 1em; 
    height: 1em; 
    background: rgba(0,0,0,0.75); 
    border: 1px solid #FFF; 
    position: absolute; 
    top: 0.5em; 
    left: -0.75em; 
    -moz-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg); 
    transform: rotate(45deg); 
}

來源

2013-12-13 NewBoy

他們在鼠標懸停打開，右我可能會嘗試'#main？ -nav li：hover> ul' –

是啊他們o筆在鼠標懸停 – NewBoy

好吧，選擇器說：如果我在'＃main-nav'，我喜歡列表項目，給我'ul'是直接的孩子。你可以然後爲顯示/隱藏 –

嗨首先在你有這樣的屬性：

溢出：隱藏

隱藏你的形狀，並只讓視覺如箭，但隱藏在subsubmenu。您可能需要找到只繪製箭頭的形狀。

而且要設置

#main-nav ul li { 
    position:relative; 
}

刪除此與subsubmenu可以是一級菜單的100％height。

並在此選擇：

#main-nav li:hover ul

添加>隻影響直接孩子的#main-nav li不是所有的內部UL ul：

#main-nav li:hover > ul

演示http://plnkr.co/edit/WAZplAWxzLieRZh1jNMa?p=preview

編輯

您可以在這裏看到如何獲取right arrow shape，檢查這個新Demo

來源

2013-12-13 13:11:34 DaniP

這裏是概念的一個粗略的證明作爲 '從第一原理' 的方式嵌套徘徊：

http://jsfiddle.net/6X9NR/1/

<ul id="main-nav"> 
    <li><a href="#">1.1</a> 
     <ul> 
      <li><a href="#">1.1.1</a> 
       <ul> 
        <li><a href="#">1.1.1.1</a></li> 
        <li><a href="#">1.1.1.2</a></li> 
       </ul> 
      </li> 
      <li><a href="#">1.1.2</a> 
       <ul> 
        <li><a href="#">1.1.2.1</a></li> 
        <li><a href="#">1.1.2.2</a></li> 
       </ul>    
      </li> 
     </ul> 
    </li> 
    <li><a href="#">1.2</a></li> 
</ul>

的CSS：

#main-nav ul {display:none} 
#main-nav li:hover > ul {display: block}

主要部分是與最後一個選擇器。它說任何ul都是應該顯示的是一個li的直接孩子。

第一個選擇器隱藏所有子菜單。

它就像基本功能一樣簡單。修改後，這應該適用於任意定位更改和CSS轉換，如果你願意。

來源

2013-12-13 13:09:34

試試這行61變化溢出（或刪除）：

#main-nav li ul, .subMenu li:hover ul {overflow:hidden;}

確保溢出在錨點懸停的左箭頭只是添加溢出：隱藏在你的CSS「風格的71行錨點。CSS」

#main-nav li ul a, .subMenu li ul a {overflow:hidden;}

也從李elemnts刪除相對位置，從父UL 的頂部對齊孩子UL的becouse你有41行的無邊框，頂部，你就必須添加此，調整所有3 UL的從頂部：

#main-nav ul ul ul {top:-1px}

希望我沒有忘記什麼反正你的問題只是溢出:)其他的東西都只是表面的改變

來源

2013-12-13 13:14:40 nomak22

創建三級css手風琴菜單

回答

相關問題