在下拉/可折叠菜单中相对定位菜单项？

Question

首先，here's the dropdown/collapsible menu 我已经构建好了。

至于小提琴中显示的the preview中的“menu”和“menu-item”是什么——Channels、Search和About我们是菜单，而当你点击菜单时下拉/滑出的那些是菜单项。

屏幕截图：

我在菜单项上使用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;
}

是否也可以在“菜单项”(.collapse) 上使用position: relative; 来实现相同的功能？

---

注意：在您使用小提琴提交答案之前，请确保通过单击每个菜单并比较两个小提琴（您的和我的）中的菜单功能相同 （以确认没有菜单项因位置变化而错位）。

当然，您可以添加额外的 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/