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

Question

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

我可以将父容器设置为显示：块（无宽度/最大）或设置每个项目的宽度，并解决问题，但我不想这样做。

我希望根据父母宽度无关紧要的项目进行调整宽度。

菜单是动态的，所以我不知道先验，显示块与页面中的其他元素创建"问题"。

------- 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 Inexter Inside的元素，当我设置其宽度自动时，我成功了。这是有道理的，因为当您显示块元素试图适合其父时。但是，当您在显示块时将其宽度设置为自动时，它的宽度从其内容中宽度。