yivi yivi - 4 months ago 10
HTML Question

styling nested unordered list into columns

I want to have a nested list to appear as a group of columns.

Each level of the list should be a new column, and all the columns should be aligned to the top. Something like this:

nested list as a table

Displaying submenus or not is easy enough, but I can't get the positioning to work without some weird negative top or something like that.

Is there some logical and neat way to achive this?

I have the beginning of the code here in jsfiddle

<div id="menu">
<ul>
<li>Top 1
<ul>
<li>Sub 1.1</li>
<li>Sub 1.2</li>
<li>Sub 1.3</li>
</ul>
</li>
<li class='current-item'>Top 2
<ul>
<li>Sub 2.1</li>
<li class="current-item">Sub 2.2
<ul>
<li>Bottom 2.2.1</li>
<li>Bottom 2.2.2</li>
<li>Bottom 2.2.3</li>
<li class="current-item">Bottom 2.2.4</li>
</ul>
</li>
<li>Sub 2.3</li>
<li>Sub 2.4</li>
<li>Sub 2.5</li>
<li>Sub 2.6</li>
</ul>
</li>
<li>Top 3
<ul>
<li>Sub 3.1</li>
<li>Sub 3.2</li>
<li>Sub 3.3</li>
<li>Sub 3.4</li>
</ul>
</li>
</ul>
</div>


And a skeleton scss:

#menu {
/* top level */
ul {
border: 1px solid black;
list-style: none;
li
/* sub level */
ul {
display: none;
li {
/* bottom of the pit */
ul {
li {
}
}
}
}
}
}
}

#menu .current-item > ul{
display: block;
}


Any takers?

Answer

It's about positioning the submenu's by reference to the parent ul rather than, as is traditional, the li

JSFiddle Demo

Added CSS

#menu > ul {
    position: relative;
    display: inline-block;
}
#menu >ul > li ul {
    position: absolute;
    top:0;
    left:100%;

}