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

首先，我构建了

至于小提琴中显示的“菜单”和“菜单项”——频道、搜索和关于我们是菜单，而单击菜单时下拉/滑出的是菜单项

屏幕截图：

我使用的是

位置：绝对.collapse

）上的code>和

位置：相对

相关代码（）：

/*菜单：
*/
.顶级菜单{
位置：相对位置；
}
/*菜单项：*/
.崩溃{
位置：绝对位置；
宽度：570px；
z指数：1000；
填充：0；
保证金：0；
颜色：#222；
背景色：#fff；
-webkit盒阴影：0 5px 5px rgba（0,0,0,0.2），0 10px 20px rgba（0,0,0,0.12）；
-moz盒阴影：0 5px 5px rgba（0,0,0,0.2），0 10px 20px rgba（0,0,0,0.12）；
盒影：0 5px 5px rgba（0,0,0,0.2），0 10px 20px rgba（0,0,0,0.12）；
溢出：隐藏；
}

是否可以使用
position:relative实现相同的功能.collapse
）上的代码>


注意：在用提琴提交答案之前，请确保两个提琴（你的和我的）中的菜单功能相同，方法是单击每个菜单并进行比较（以确认没有菜单项因位置变化而错位）

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


是的，我试了几个小时，但都没有成功，我想看看这是否可行。
像这样的事情怎么样：


从
.collapse
中删除宽度
从列中删除浮点，更改为
内联块
将
空白
更改为
nowrap

Html:

您可能还需要重置每个
频道列中的
空白
值

结果：
像这样的事情怎么样：


从
.collapse
中删除宽度
从列中删除浮点，更改为
内联块
将
空白
更改为
nowrap

Html:

您可能还需要重置每个
频道列中的
空白
值

结果：
如果我可以问的话-绝对值有什么问题？在
relative
中定位
absolute
效果很好（例如，
right:0；
在右对齐菜单中非常适合您）-什么不适合您？另外，我在其他框下面看到了“版本”框，而不是在右边（在Firefox17上）@Kobi是的，没错。您看到的是因为我在菜单项上指定了宽度（
.collapse
），但我不想要它。如果删除宽度，则菜单项不再是水平的，即垂直折叠。但是，如果我可以让菜单使用
relative
，我可以对菜单项中的列使用
inline block
而不是
float
。明白了吗？我想是的。那么，真正的问题是如何获得自动宽度呢？@Kobi是的。这是正确的。但我认为唯一的选择是使用
position:relative
并对菜单项中的列使用
内联块
。如果我可以问一下-
绝对
有什么问题？在
relative
中定位
absolute
效果很好（例如，
right:0；
在右对齐菜单中非常适合您）-什么不适合您？另外，我在其他框下面看到了“版本”框，而不是在右边（在Firefox17上）@Kobi是的，没错。您看到的是因为我在菜单项上指定了宽度（
.collapse
），但我不想要它。如果删除宽度，则菜单项不再是水平的，即垂直折叠。但是，如果我可以让菜单使用
relative
，我可以对菜单项中的列使用
inline block
而不是
float
。明白了吗？我想是的。那么，真正的问题是如何获得自动宽度呢？@Kobi是的。这是正确的。但我认为唯一的选择是使用
position:relative
并对菜单项中的列使用
内联块
。我很快在我的开发网站上复制了这一点，它似乎工作得很好，因此将其标记为答案。现在已经凌晨2点多了，无法好好看一看。编辑：您建议将
空白
更改为
无中断
，但您的答案中的CSS使用
nowrap
。那是个错误吗？另外，您所说的“您可能还希望重置每个
.channel列中的
空白
值”是什么意思。你的意思是说，使用
空白是个好主意：正常在
频道列上
？（附言：非常感谢！）这是我的意思，以防万一（例如，你可能在专栏中有文本块）。很乐意帮忙！（还有，请记得说清楚。晚安！编辑。我想我已经编好了《不间断》
。谢谢。
：）
你好。在不同浏览器之间测试菜单的外观（因为它的设计是完整的），我注意到菜单实际上在Firefox中被切掉了，就像这样：--你也看到了吗？你知道为什么会这样吗？（很抱歉，我之前没有检查。）（…继续）在您的回答中，您要求我使用
空白：正常
打开
.channel column
重置属性。我刚刚意识到这就是我上面提到的问题#2另一件事是，Chrome中的“搜索”菜单被破坏了（试着点击多次——至少三次，自己看看）。有什么想法吗？任何帮助都会很好。谢谢我很快在我的开发站点上复制了这一点，它似乎工作得很好，因此将其标记为答案。现在已经凌晨2点多了，无法好好看一看。编辑：
/* 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;
}

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

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