CSS中的第三層下拉菜單需要更智能的垂直對齊

-1

現有問題how-to-add-a-3rd-level-to-my-css-drop-down-menu在jsfiddle上有一個優雅的代碼片段和工作示例，以顯示原始海報如何做到這一點。結果是這樣的：CSS中的第三層下拉菜單需要更智能的垂直對齊

enter image description here

但隨着設計的一個小問題是，第三/第四級菜單固定在樹的最頂端。如果他們在二級菜單中固定在他們自己的「父母」上，會更好。

我是說，如果你增加富和酒吧菜單項級2-A-4像這樣：

 <li><span>Level 2-A-4</span> 
      <ul> 
       <li><span>Foo</span></li> 
       <li><span>Bar</span></li> 
      </ul> 
     </li>

...

那麼就應該掛完級別2-A-4，不是錨定在頂部。

如何做到這一點？

enter image description here

來源

2013-10-07 hawbsl

只是編輯這樣的課程：

#menu > li > ul li:hover > ul{ 
    display:block; 
    position:absolute; 
    left:100%; 
    border-left:solid 3px #fff; 
    top:inherit;     /*changed*/ 
    margin-top:-29px;    /*added*/ 
    width:auto; 
}

jsFiddle

來源

2013-10-07 15:49:02

@hawbsl任何時候哥們，'-29'是你的'li'的高度，你可以改變它。 –

標記

<div class="dropdown" style="background-color: white;" tabindex="1"> 
     <a>Menu</a> 
     <ul> 
      <li> 
       <a>Fruits</a> 
       <ul> 
        <li><a>Apple</a></li> 
        <li><a>Orange</a></li> 
        <li><a>Grape</a></li> 
        <li><a>Banana</a></li> 
       </ul> 
      </li> 
      <li> 
       <a>Vegetables</a> 
       <ul> 
        <li><a>Lemon</a></li> 
        <li><a>Cucumber</a></li> 
        <li><a>Melon</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div>

CSS

.dropdown { 
    position: relative; 
    display: inline-block; 
    font-size: 110%; 
} 
.dropdown ul { 
    position: absolute; 
    top: -100%; 
    left: 100%; 
    display: none; 
    background-color: inherit; 
    padding: 0; 
    list-style: none; 
    border: 1px solid #ccc; 
} 
.dropdown ul li { 
    position: relative; 
    list-style: none; 
    margin: 5px 0; 
    background-color: inherit; 
} 
.dropdown ul li a { 
    display: block; 
    padding: 3px 10px; 
} 
.dropdown ul li a:hover { 
    background-color: #18b6f2 !important; 
} 
.dropdown ul li:hover > ul { 
    display: block; 
    top: 0; 
    background-color: inherit; 
} 
.dropdown ul li:hover > a { 
    background-color: #85ddff; 
} 
.dropdown:hover > ul { 
    display: block; 
}

這將有助於你的需要。它是可擴展的。你可以使用任何數量的子平面。

來源

2013-10-07 15:31:56

試試這個修改後的代碼。 http://jsfiddle.net/Wss5A/146/ 我所做的一切改變頂部top: auto;並添加使用margin-top -27px;

#menu > li > ul li:hover > ul{ 
    display:block; 
    position:absolute; 
    left:100%; 
    border-left:solid 3px #fff; 
    top: auto; 
    width:auto; 
    margin-top: -27px; 
}

來源

2013-10-07 15:34:32 bradcush

無需保證金的調整。你可以使用下面的一個。 –

您可以刪除top:0和改變li和span序列頂端陰性切緣：

<li> 
     <ul> 
      <li><span>Foo</span></li> 
      <li><span>Bar</span></li> 
     </ul> 
     <span>Level 2-A-4</span> 
    </li>

http://jsfiddle.net/Wss5A/149/

來源

2013-10-07 15:37:53 cwhy

耶，那也可以工作 – hawbsl

CSS中的第三層下拉菜單需要更智能的垂直對齊

回答

相關問題