3

我正在为下拉菜单使用一些标记。

标记如下：

<div class="select">
    <a href="#" class="anchor menu-active">
        <label>val1</label><span class="arrow"><label></label></span>
    </a>

    <div class="container menu-visible">
        <ul>
            <li>
                <a value="val1" class="item-selected">val1</a>
            </li>
            <li>
                <a value="val2333333333">val2333333333</a>
            </li>
        </ul>
    </div>
</div>

第一个a表示菜单项，containerdiv 表示子菜单项的列表。

  • 子菜单项的宽度是可变的，因为它们是动态生成的。
  • 锚中的文本是粗体的，因此在某些情况下，锚的宽度可能大于子菜单列表。

我需要做什么： 和 的宽度container必须anchor相同。子菜单可能比锚点更宽，反之亦然。另外，宽度不应该人为限制，应该允许随着内容变宽而扩大，无论是.anchor还是container.

这是我一直在玩的 CSS，但似乎根本无法anchor扩展以适应container：

.container{
    position: absolute;
}

.anchor{
    font-weight: bold;
}

li{
    background: blue;
}

ul{
    display: inline-block;
}

.select{
    background: red;
    display: inline-block;
}

和小提琴：http: //jsfiddle.net/MxdQS/

我希望尽可能只使用 CSS，所以请不要使用 javascript 解决方案 :)

还有一个图表可以更好地说明我在说什么： 在此处输入图像描述

一些澄清：如果我有 2 个不同宽度的容器并且 1 个是绝对定位的，我怎样才能将它们匹配在一起，以便较短的容器总是扩展到较长容器的宽度？

谁能建议如何做到这一点？

4

1 回答 1

1

在这里查看演示

CSS

.container{
    position: absolute;
    width:150px;
}

.anchor{
    font-weight: bold;
}
ul{
    margin:0;
    padding:0;
}

li{
    background: blue;
    list-style:none;
    margin:0;
    padding:0l
}



.select{
    background: red;
    display: inline-block;
    width:150px;
}

更新

检查更新的演示

于 2012-05-19T12:18:58.730 回答