展開自舉下拉菜單，使其與父菜單保持內聯

我希望下拉導航菜單的子菜單與其父項內聯。第一個鏈接是內嵌的，因爲 - .dropdown-submenu> .dropdown-menu {top：0;}但是子菜單中的其他鏈接的「頂部」位置相對於其父菜單鏈接發生了變化。請看看http://bootply.com/66517 展開自舉下拉菜單，使其與父菜單保持內聯

  <ul class="dropdown-menu"> 
           <li class="dropdown-submenu"> 
           <a href="#">More options</a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
           </ul> 
           </li> 
           <li class="dropdown-submenu"> 
           <a href="#">More options</a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
           </ul> 
           </li> 
           <li class="dropdown-submenu"> 
           <a href="#">More options</a> 
           <ul class="dropdown-menu"> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
            <li><a href="#">Second level link</a></li> 
           </ul> 
           </li> 
           <hr> 
          </ul> 
          </li>   
         </ul>

來源

2013-07-05 Tom Rudge

爲此你必須針對特定的孩子css –

我害怕你會這麼說！可以這樣做，但如果你有鏈接（菜單項）每天都在變化，孩子的數量也會變化。 –

是啊，我也在想那種方式，但你的情況是獨一無二的。所以技巧是獨一無二的。也不是我認爲的標準。是嗎？ –

你可以試試這個

這會工作得很好

.dropdown-submenu { 
    position: static !important;; 
}

，你可以在你分鐘找到這個CSS。 bootstrap的版本css，但我更喜歡你在包含此下拉列表的特定頁面上修改它。

來源

2013-07-05 10:47:39

就這麼簡單！我知道有一種比使用孩子更簡單的方法。 –

是啊你是對的，但我們必須更加努力地思考這個hahahhaha :-)反正謝謝你給我這樣的挑戰 –

展開自舉下拉菜單，使其與父菜單保持內聯

回答

相關問題