Forcing <ul> levels to display in separate panels - html

Question

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">1-level-1</li>
<li class="item-124">1-level-2</li>
<li class="item-125 active deeper parent">1-level-3
<ul class="nav-child unstyled small">
<li class="item-164">2-level-1</li>
<li class="item-165">2-level-2</li>
<li class="item-166 current active deeper parent">
2-level-3
<ul class="nav-child unstyled small">
<li class="item-212">3-level-1</li>
<li class="item-213">3-level-2</li>
</ul>
</li>
<li class="item-210">2-level-3</li>
<li class="item-211">2-level-4</li>
</ul>
</li>
<li class="item-126">1-level-4</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.

Answer 1

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">1-level-1</li>
<li class="item-124">1-level-2</li>
<li class="item-125 active deeper parent">1-level-3
<ul class="nav-child unstyled small">
<li class="item-164">2-level-1</li>
<li class="item-165">2-level-2</li>
<li class="item-166 current active deeper parent">
2-level-3
<ul class="nav-child unstyled small">
<li class="item-212">3-level-1</li>
<li class="item-213">3-level-2</li>
</ul>
</li>
<li class="item-210">2-level-3</li>
<li class="item-211">2-level-4</li>
</ul>
</li>
<li class="item-126">1-level-4</li>
</ul>