placing nesting ul's to the right

Question

I am currently building a custom navigation dropdown, for that I would like to place the ul that is wrapped by a parent li next to its parent.

The navigation will have a border around the first level, which should contain the other Levels as well. Positioning the ul absolute to the next level ul does kind of work, but not as requested. Fiddle at the bottom.

Default view:

- Level 1
- Level 1
    - Level 2
        - Level 3
        - Level 3
    - Level 2
    - Level 2
    - Level 2
- Level 1

Desired output:

- Level 1    - Level 2    - Level 3
- Level 1    - Level 2    - Level 3
- Level 1    - Level 2
             - Level 2

Example:

-------------------------------
| Level 1 | Level 2 | Level 3 |
| Level 1 | Level 2 | Level 3 |
| Level 1 | Level 2 |         |
|         | Level 2 |         |
-------------------------------

---

Basic syntax:

<ul>
    <li>Level 1</li>
    <li>
        Level 1
        <ul>
            <li>
                Level 2
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1</li>
</ul>

Minified current solution

Answer 1

I think this is impossible without using JavaScript or amending the DOM structure.

What you want it to do is to remove layout so all the LI sit next to each other, however you also want to keep it so the height of the whole container is kept.

So, here's a working JavaScript solution: http://jsfiddle.net/w8oe59rp/8/

var arrUL = document.querySelectorAll('ul'),
    MaxHeight = 0;
for (var i = 0; i < arrUL.length; i++) {
    var intHeight = arrUL[i].offsetHeight;
    if (intHeight > MaxHeight) {
        MaxHeight = intHeight;   
    }
}
document.querySelector('.main').style.height = MaxHeight + 'px'

* {
    box-sizing:border-box;
}
ul {
    list-style: none;
    padding: 8px 16px;
    margin-top: -1px;
    width: 15em;
    margin-bottom: 0;
}
li {
    width: 5em;
}
.main {
    float:left;
    position:relative;
    border: 1px solid;
}
.main:before {
    content:"";
    border-left:1px solid;
    top:0;
    left:33.33%;
    height:100%;
    position:absolute;
}
.main:after {
    content:"";
    border-left:1px solid;
    top:0;
    right:33.33%;
    height:100%;
    position:absolute;
}
ul ul {
    position:absolute;
    top:0;
    left:33.33%;
    width:5em;
}
ul ul ul {
    left:100%;
}

<ul class="main">
    <li>Level 1</li>
    <li>Level 1
        <ul>
            <li>Level 2
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1</li>
</ul>

Answer 2

Add this

li ul{
    display: none;
}

li:hover{
    background-color: limegreen;
}/*just for styling*/

li:hover > ul{
    display: inline-block;
}

Edit ul padding

padding: 8px 0px 8px 16px;

jsfiddle link -> http://jsfiddle.net/w8oe59rp/3/

Edit

add class has-dropdown to any li that has drop down and then add this style

.has-dropdown{
    position: relative;
}
.has-dropdown ul{
    position: absolute;
}

Updated fiddle -> http://jsfiddle.net/w8oe59rp/4/

Answer 3

you have to give child ul to position relative. here is working demp

.container {
    height: 117px;
    position: relative;
}
ul{
    bottom: 0;
    list-style: none;
    padding: 8px 16px;
    position: absolute;
    top: 0px;
    left: 100%;
    border: 1px solid;
    margin-bottom: -1px;
    margin-top: -1px;
}

li{
    width: 5em;
}

.main{
    left: 20px;
    top: 20px;
}

.main > li ul {
    left: 0;
    position: relative;
    width: 100%;
}

<div class="container">
<ul class="main">
    <li>Level 1</li>
    <li>
        Level 1
        <ul>
            <li>
                Level 2
                <ul>
                    <li>Level 3</li>
                    <li>Level 3</li>
                </ul>
            </li>
            <li>Level 2</li>
            <li>Level 2</li>
            <li>Level 2</li>
        </ul>
    </li>
    <li>Level 1</li>
</ul>
</div>