1

首先，这是我构建的下拉/可折叠菜单。

至于小提琴中显示的预览中的“菜单”和“菜单项”是什么 - Channels，Search和About Us是菜单，而单击菜单时下拉/滑出的菜单是菜单项。

截屏：

截屏

我position: absolute;在菜单项 ( .collapse) 和position: relative;菜单上使用。

相关代码（更多在小提琴中）：

/* 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。

是的，我徒劳地尝试了几个小时，并想看看这是否可能。

4

1 回答 1

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/

于 2012-12-21T20:25:53.380 回答