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

Question

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

我可以将父容器设置为 display:block(no width/max) 或为每个元素设置一个宽度，并解决问题，但我不想这样做。

我希望根据与父宽度无关的元素调整宽度。

菜单是动态的，所以我不知道之前的显示 block 会与页面中的其他元素产生“问题”。

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