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

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;
}

是否可以使用“menu-item”（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;}

您可能还想重置每个white-space中的.channel-column值。

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