Positioning html elements in a nested list - html

Question

Consider the following nested list:
<div >
<ul class="main">
<li>Fist item<ul class="ab"><li>a1</li><li>a2</li><li>a3</li><li>a4</li></ul>
</li>
<li>Second item<ul class="ab"><li>b1</li><li>b2</li><li>b3</li><li>b4</li></ul></li>
<li>Third item<ul class="ab"><li>c1</li><li>c2</li><li>c3</li><li>c4</li></ul>
</li>
</ul>
</div>
I want the outer level displayed horizontally, and the inner level displayed just below the outer one. To this aim I've used relative and absolute position for outer and inner lists in the css style:
#container {width:300px}
main {width:200px;position:relative;}
body > div > ul > li {display:block;float:left;padding:5px;}
body > div > ul > li > a:hover + .ab {display:block;}
.ab {display:none;clear:both;position:absolute;left:0px}
It works fine unless you resize container width to 200px (as you can try on JSfiddle) (I have to achieve a solution working with different widths). In this case the inner level container overlaps the outer one. I wonder if it is possible to force the inner container to be displayed after the outer container through css or solve this issue in another way.
Edit: I need to make my question clearer because given answers so far show the same proposal I have already made. So i've made a little addition in the css styles declaring a box for the inner container (here the update JSfiddle snippet). The key issue is that my toy example simulates the left column in a more complicated web page. I do not know in advance the exact width of such a column (maybe 150px, maybe 200px or something similar) and I do not know in adcance the length of the titles for the outer list elements. I need a solution that works for whichever width the outer container could have.
This is a screenshot of what I obtain in the default case:
This is what I obtain narrowing the outer container to 200px (try yourself on JSfiddle):
and this is instead what I want to obtain:
I hope to have been my question clear now.

Answer 1

U need to make outer level positioned to relative and inner level as absolute, like this:
#container {width:300px}
.ab {
display:none;
clear:both;
position:absolute;
left:0px
}
body > div > ul > li {
display:block;
float:left;
padding:5px;
position:relative;
}
body > div > ul > li > a:hover + .ab {
display:block;
position:absolute;
left:0; /* So it aligns to the left edge of outer level */
top:100%; /* So inner level isn't overlaping outer */
}
main {width:200px;position:relative;}
Example here: https://jsfiddle.net/d9fsff69/2/

Answer 2

To ensure flexibility, make sure your widths are not fixed. And the rest is a matter of margin. I added some background coloring for visual aid:
Use this CSS:
#container {
width: 100%
}
main {
width: 200px;
position: relative;
}
body > div > ul > li {
display: block;
float: left;
padding: 5px;
background:#999;
}
body > div > ul > li > a:hover + .ab {
display: block;
background:#ddd;
margin-top: 5px;
}
.ab {
display: none;
clear: both;
position: absolute;
left: 0px
}
Here is the DEMO

Answer 3

I would just give you similar example:
body {
margin: 0px;
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
width: 100%;
text-align: center;
display: inline-block;
margin: 0px;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
background: #000;
color: #fff;
}
ul li {
font: 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 20px 20px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
color: #71b51e;
background: #161616;
}
ul li ul {
padding: 0;
position: absolute;
left: 0;
top: 57px;
width: 140px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #161616;
display: block;
color: #fff;
text-align: left;
padding: 5px 15px;
height: 25px;
}
ul li ul li:hover {
background: #111;
color: #71b51e;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>OPTION
<ul>
<li>SUB-1</li>
<li>SUB-2</li>
<li>SUB-3</li>
<li>SUB-3</li>
</ul>
</li>
<li>OPTION</li>
<li>
OPTION
<ul>
<li>SUB-1</li>
<li>SUB-2</li>
<li>SUB-3</li>
<li>SUB-3</li>
</ul>
</li>
<li>OPTION</li>
</ul>