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

Question

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

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

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

菜单是动态的，所以我不知道之前的显示块会创建 "issues" 页面中的其他元素。

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

white-space: nowrap;

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

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

Dropdown Vertical Menu Increase submenu width automatically

html

css

submenu

drop-down-menu