相對位置菜單項在下拉/摺疊菜單中？

Question

首先，here's the dropdown/collapsible menu我已經構建。

至於什麼是「菜單」和「菜單項目」是在搗鼓出the preview - 頻道，搜索和關於我們的菜單，而那些下拉/當你點擊菜單時滑出是菜單項。

截圖：

我使用的菜單position: absolute;上的菜單項（.collapse），和position: relative;。

的相關代碼（more in the fiddle）：

/* Menu: <li class="float-left top-menu">... */ 
.top-menu { 
    position: relative; 
} 

/* Menu-Item: <div id="channels-menu-item-container" class="collapse">... */ 
.collapse { 
    position: absolute; 
    width: 570px; 
    z-index: 1000; 
    padding: 0; 
    margin: 0; 
    color: #222; 
    background-color: #fff; 
    -webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12); 
    -moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12); 
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 10px 20px rgba(0, 0, 0, 0.12); 
    overflow: hidden; 
} 

是有可能實現的 「菜單項」 使用position: relative;相同的功能（.collapse）呢？

---

注：在你提交的答案與提琴，請確保在兩個小提琴菜單（你和我）都通過單擊每個菜單，比較（所以功能相同以確認沒有菜單項由於定位改變而錯位）。

當然，您可以添加額外的HTML和CSS位。

---

是的，我試了幾個小時徒勞無功，想看看它是否可能。

Answer 1

怎麼是這樣的：

• 從.collapse刪除寬度。
• 從列中移除浮動，更改爲inline-block。
• 更改white-space至nowrap。

HTML：

<div class="in collapse" id="channels-menu-item-container" style="height: auto;"> 
    <div id="channels-menu-item-wrapper"> 
     <ul class="channel-column" id="nav-channels"> 
      <!-- ... --> 
     </ul> 
     <ul class="channel-column" id="nav-topics"> 
      <!-- ... --> 
     </ul> 
     <ul class="channel-column" id="nav-editions"> 
      <!-- ... --> 
     </ul> 
     <div class="aahans"></div> 
     <div class="clearfix"></div> 
    </div> 
</div> 

的CSS：

.collapse { 
    position: absolute; 
    min-width:200px; /*for the seach box*/ 
    /* ... */ 
} 

#channels-menu-item-wrapper { 
    border-bottom: 4px solid #259; 
    white-space:nowrap; 
} 

.channel-column {display:inline-block; vertical-align:top;} 

您可能還需要重置每個.channel-column的white-space值。

結果：http://jsfiddle.net/kobi/fxSYT/1/embedded/result/