Question

我创建了一个下拉垂直菜单。菜单正在运行，但子菜单宽度取决于父容器/ div宽度，这使文本和其他内容堆叠。

我可以将父容器设置为display：block（no width / max）或设置每个项目的宽度，并解决问题，但我不想这样做。

我希望根据父宽度无关的项目调整宽度。

菜单是动态的，所以我不知道先前的显示块会产生＆＃34;问题＆＃34;与页面中的其他元素。

------ CSS --------------

.dropdown {
  position: relative;
  margin: 0;
  top: 0;
  z-index: 1; }
  .dropdown__trigger {
    display: inline-block;
    padding: 0.3125rem; }
  .dropdown__content {
    position: absolute;
    left: 0;
    top: 100%;
    border: 1px solid red;
    visibility: hidden;
    transform: translateY(15px);
    opacity: 0;
    background: #fff; }
  .dropdown__item {
    padding: 1rem;
    display: inline-block; }
  .dropdown .dropdown .dropdown__content {
    left: 100%;
    top: 0; }
  .dropdown:hover > .dropdown__content {
    transform: translateY(0);
    opacity: 1;
    transition: opacity 0.3s, visibility 0.3s, transform 0.3s;
    visibility: visible; }

---- HTMl --------------- -------无视内联样式仅用于开发目的-------

<div class="grid" style="width:150px;">
<div class="dropdown">
    <a class="button--primary dropdown__trigger ">Dropdown</a>

    <div class="dropdown__content">
        <a class="dropdown__item" href="#">Action Something else here</a></li>
        <li><a class="dropdown__item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>

        <div class="dropdown">
            <a href="#" class="dropdown__trigger">trig</a>
            <div class="dropdown__content">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li><a class="dropdown-item" href="#">Something else here</a></li>
                <div class="dropdown">
                    <a href="#" class="dropdown__trigger">Dropdown</a>
                    <div class="dropdown__content">
                        <li><a class="button--primary dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div style="width:340px;">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vitae tincidunt nunc. Praesent eu sagittis
        ex, eu viverra leo. Sed quam felis, tincidunt ut nibh in, condimentum aliquet enim. Etiam malesuada semper sem,
        ac fermentum purus facilisis eu. Vestibulum ut ipsum tortor. Mauris non dui eu odio condimentum interdum.
        Fusce commodo, nulla vitae vulputate
        mollis, sapien massa convallis eros, id tempor lectus erat sit amet velit. Sed quis ante ut augue congue
        malesuada vitae at ipsum. Nulla non libero eu risus elementum lobortis </p>
</div>
</div>

我该如何解决这个问题？（我知道那里有很多菜单，但我想创建自己的解决方案，以便学习和理解）

http://codepen.io/anon/pen/aJwKVg

Answer 1

您可以将此样式添加到.dropdown__content类。

white-space: nowrap;

对于像div这样的元素，当我将它们的宽度设置为auto时，我成功了。这是有道理的，因为当你显示块元素试图适合其父元素。但是当你在显示块时将其宽度设置为自动时，它会从其内容中获取宽度。

下拉垂直菜单自动增加子菜单宽度

1 个答案: