Using Flexbox to make a navbar with a dropdown menu [duplicate] - html

Question

We all have hard times with positioning absolute divs :S
In my case its horizontal sub-menus with this css:
ul.children{
display:none;
position:absolute;
}
ul.children li{
position:relative;
height:60px;
float:none;
}
li.page_item_has_children:hover > ul.children{
display:inline;
}
As you can see on the picture whole submenu moves to the left for 50% of the parents width...
I tried everything and created just a bigger mess xD
So if anyone can help me out with this I will be very thankful :)
HTML:
<li class="page_item page-item-2 page_item_has_children">
About
<ul class='children'>
<li class="page_item page-item-39">
About</li>
<li class="page_item page-item-41">
Contact us</li>
</ul>
</li>
I can't change html cause its wordpress theme :S

Answer 1

Try something like this:
ul {
list-style-type: none;
padding: 0;
}
.page_item_has_children {
position: relative;
}
ul.children {
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 0;
min-width: 200px; /* or whatever makes sense */
}
ul.children li {
height: 60px;
}
.page_item_has_children:hover > ul.children {
display: block;
}
The important piece here is to make sure the 'page_item_has_children' element is relatively positioned and that the child 'ul' is absolutely positioned.
JS Fiddle

Answer 2

Update
ul.children {
display: none;
}
ul.children li {
position: relative;
height: 60px;
float: none;
}
li.page_item_has_children:hover > ul.children {
display: inline;
}
li {
float: left;
list-style-type: none;
width: 5em;
}
<ul>
<li class="page_item page-item-2 page_item_has_children">
About
<ul class='children'>
<li class="page_item page-item-39">
About</li>
<li class="page_item page-item-41">
Contact us</li>
</ul>
</li>
<li class="page_item page-item-2 page_item_has_children">
More info
<ul class='children'>
<li class="page_item page-item-39">
Item 1</li>
<li class="page_item page-item-41">
Item 2</li>
<li class="page_item page-item-41">
Item 3</li>
</ul>
</li>
</ul>