CODEWITHSUNDEEP
htmlcsshtml-lists
zorza
zorza

Reputation: 2884

Forcing <ul> levels to display in separate panels

I've got a 3-level menu generated by CMS (Joomla to be exact), which looks something like this:

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

What I need is to force it to behave like a menu for example from this site: http://wachtel.de/backoefen/etagenoefen.html - I mean display every nested level in a separate box under it's parent.

I'm having trouble achieving it in pure CSS, so before I loose my mind, I'd like to ask you: Can it even be done, or do I need to use JS?

EDIT:

So far I've tried to make the prime UL relative and sub-ULs absolute with "left: 0" and "width: 100%", but it doesn't seem to work.

EDIT2:

Problem was caused by bootstrap.css property .nav > li {position: relative}, which was ruining the layout.

Upvotes: 1

Views: 127

Answers (1)

Christoph
Christoph

Reputation: 51201

All you need in your case is some positioning. Position the .nav relatively, then you can absolutely position the .nav-childs accordingly. I inserted a minimal example for you - I'm sure you can figure out the hide/show stuff on hover by yourself.

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

Upvotes: 4

Related Questions