html - 水平显示嵌套 UL 的垂直导航菜单

Question

我想获取一个 ul，垂直显示它，但其嵌套的 ul 显示在右侧。

转折点:我已经做到了。它看起来像这样:

Imgur

但为什么最后一个子菜单(Frauke Eigen)默认这么窄？为什么它不能让文本展开而不换行？我希望所有子菜单都具有相同的宽度并且彼此相邻放置，就像表格中的三个等距列一样 - 我该怎么做？最好的方法是以某种方式获取 .sub1 的宽度并将其传递给 .sub2，因为 calc(33%) 似乎意味着“父宽度的 33%”，它总是会变小。

这是我当前的代码 - 我包含了一些 HTML，因此您可以看到菜单结构...

.sub1 {
        width:calc(33%); position:relative;outline: 1px solid black;
    }
    .themenu li>a{
        display:block;background:#eee;
    }
    .sub1 ul {
    }
    .sub2{
        position:absolute; top:0px;left:180px;
        outline: 1px solid black;
    }
    .sub3{
        position:absolute; top: 0px; left:120px;
        outline: 1px solid black;
    }
    .themenu ul ul {
        display: none;
    }

<ul class="sub1">
            <li><a href="#" title="Ausstellungen" >Ausstellungen</a>
                <ul class="sub2">
                    <li><a href="#" title="Aktuell" >Aktuell</a>
                        <ul class="sub3">
                            <li><a href="#" title="Frauke Eigen" >Frauke Eigen</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="Vorschau" >Vorschau</a>
                        <ul class="sub3">
                            <li><a href="#" title="Andrew Chiw" >Andrew Chiw</a></li>
                        </ul>
                    </li>
                    <li><a href="#" title="Archiv" >Archiv</a></li>
                </ul>
            </li>
</ul>

Answer 1

您将整个容器 .sub1 定义为 33%，但您没有定义任何其他内容。所有如果 children 要继承那个宽度。在您的示例中，每次都缩小 33%。特别是如果您的导航元素将是绝对的，您需要给它们一个宽度，否则 ul 将只填充其容器或父级的 33%。希望有帮助