Question

我有一个由CMS生成的3级菜单（确切地说是Joomla），看起来像这样：

<ul class="nav menu">
<li class="item-108"><a href="#">1-level-1</a></li>
<li class="item-124"><a href="#">1-level-2</a></li>
<li class="item-125 active deeper parent"><a href="#">1-level-3</a>
    <ul class="nav-child unstyled small">
        <li class="item-164"><a href="#">2-level-1</a></li>
        <li class="item-165"><a href="#">2-level-2</a></li>
        <li class="item-166 current active deeper parent">
            <a href="#">2-level-3</a>
            <ul class="nav-child unstyled small">
                <li class="item-212"><a href="#">3-level-1</a></li>
                <li class="item-213"><a href="#">3-level-2</a></li>
            </ul>
        </li>
        <li class="item-210"><a href="#">2-level-3</a></li>
        <li class="item-211"><a href="#">2-level-4</a></li>
    </ul>
</li>
<li class="item-126"><a href="#">1-level-4</a></li>
</ul>

我需要的是强制它的行为就像来自这个网站的菜单：http://wachtel.de/backoefen/etagenoefen.html - 我的意思是在它的父母的单独框中显示每个嵌套级别。

我无法在纯CSS中实现它，所以在我放松心情之前，我想问你：它甚至可以完成，还是我需要使用JS？

修改

到目前为止，我已经尝试使用＆＃34;左边：0＆＃34;来确定主要UL相对和子UL绝对值。和＆＃34;宽度：100％＆＃34;，但它似乎不起作用。

EDIT2：

问题是由bootstrap.css属性引起的.nav＆gt; li {position：relative}，这破坏了布局。

Answer 1

您需要的只是一些定位。相对定位.nav，然后您可以相应地定位.nav-childs。我为你插入了一个最小的例子 - 我相信你可以自己找出隐藏/显示的东西。

.nav.menu{
    position:relative; /* positioning the base element*/
}
li{
    float:left; /* aligning the list node */

    /* the rest is presentational stuff: */
    list-style:none;
    background-color:#ddd;
    border:1px solid #aaa;
}
li a{
    text-decoration:none;   
}
.nav-child{
    /* the important part:*/
    position:absolute; /* absolute positioning*/
    left:0;            /* left according the the root element*/
    /* the top positioning stays untouched! */
}

<ul class="nav menu">
<li class="item-108"><a href="#">1-level-1</a></li>
<li class="item-124"><a href="#">1-level-2</a></li>
<li class="item-125 active deeper parent"><a href="#">1-level-3</a>
    <ul class="nav-child unstyled small">
        <li class="item-164"><a href="#">2-level-1</a></li>
        <li class="item-165"><a href="#">2-level-2</a></li>
        <li class="item-166 current active deeper parent">
            <a href="#">2-level-3</a>
            <ul class="nav-child unstyled small">
                <li class="item-212"><a href="#">3-level-1</a></li>
                <li class="item-213"><a href="#">3-level-2</a></li>
            </ul>
        </li>
        <li class="item-210"><a href="#">2-level-3</a></li>
        <li class="item-211"><a href="#">2-level-4</a></li>
    </ul>
</li>
<li class="item-126"><a href="#">1-level-4</a></li>
</ul>

强制<ul>级别显示在单独的面板中</ul>

1 个答案: