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

Question

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

至于the preview中的“菜单”和“菜单项”是什么 fiddle 中显示的 -- Channels、Search 和 About Us 是菜单，而当您单击菜单是菜单项。

屏幕截图:

我在菜单项 (.collapse) 上使用 position: absolute;，在菜单上使用 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; 来实现相同的功能？

---

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

当然，您可以添加额外的 HTML 和 CSS。

---

是的，我试了几个小时都没有成功，想看看是否可行。

Answer 1

这样的事情怎么样:

• 从 .collapse 中移除宽度。
• 从列中移除 float ，更改为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/