Question

我想拍一张ul，垂直显示，但是它的嵌套uls显示在右边。

扭曲：我已经做到了。它看起来像这样：

但为什么最后一个子菜单（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％，但您尚未定义任何其他容器。所有如果孩子们将继承那个宽度。在你的例子中看起来每次减少33％。特别是如果您的导航项目是绝对的，您需要给它们一个宽度，否则ul将只填充其容器或父项的33％。希望有所帮助

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

1 个答案: