Zurb基金會下拉位置的第一個父

在基金會6默認情況下，下拉菜單出現在相同的水平，像這樣的家長：Zurb基金會下拉位置的第一個父

有沒有辦法讓這個菜單出現在與第一個菜單相同的級別上？這是所期望的結果：

我已經通過文件看，似乎無法找到一個方法來做到這一點。提前致謝！

這是默認的代碼基金會網站

<ul class="dropdown menu" data-dropdown-menu> 
    <li> 
    <a>Item 1</a> 
    <ul class="menu"> 
     <li><a href="#">Item 1A Loooong</a> 
     </li> 
     <li> 
     <a href='#'> Item 1 sub</a> 
     <ul class='menu'> 
      <li><a href='#'>Item 1 subA</a> 
      </li> 
      <li><a href='#'>Item 1 subB</a> 
      </li> 
      <li> 
      <a href='#'> Item 1 sub</a> 
      <ul class='menu'> 
       <li><a href='#'>Item 1 subA</a> 
       </li> 
       <li><a href='#'>Item 1 subB</a> 
       </li> 
      </ul> 
      </li> 
      <li> 
      <a href='#'> Item 1 sub</a> 
      <ul class='menu'> 
       <li><a href='#'>Item 1 subA</a> 
       </li> 
      </ul> 
      </li> 
     </ul> 
     </li> 
     <li><a href="#">Item 1B</a> 
     </li> 
    </ul> 
    </li> 
    <li> 
    <a href="#">Item 2</a> 
    <ul class="menu"> 
     <li><a href="#">Item 2A</a> 
     </li> 
     <li><a href="#">Item 2B</a> 
     </li> 
    </ul> 
    </li> 
    <li><a href="#">Item 3</a> 
    </li> 
    <li><a href='#'>Item 4</a> 
    </li> 
</ul>

這裏的一個片段是默認的小提琴：http://jsfiddle.net/65017wc2/

來源

2016-05-14 John

這裏是一個可能的修復要做到這一點：

.dropdown.menu { 
    top: 0!important; 
} 
.dropdown.menu { 
    position: relative; 
} 

.dropdown.menu li { 
    position: static !important; 
} 

.dropdown.menu ul { 
    margin-top: -1px; 
}

我重寫li元素的relative位置到本地static位置，並將主要ul relative，因此所有的下拉菜單都與主菜單ul有關。

See this fiddle

來源

2016-05-14 16:21:49

Zurb基金會下拉位置的第一個父

回答

相關問題