CSS drop-up menu with second row on top-left - css

Question

I have menu position on botoom of the page.
And I need to have three level menu, when each level is in row and located to the left.
My CSS Code:
.primary-navigation {
clear: both;
float: left;
display: block;
position: relative;
width: 100%;
top: 80px;
border: 2px solid red;
}
.primary-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.primary-navigation ul > li,
.primary-navigation ul > li > ul > li,
{
position: relative;
float: left;
padding: 3px 5px;
margin: 10px 5px;
cursor: pointer;
}
.primary-navigation ul ul ul li {
float: none;
}
.primary-navigation li > ul {
display: none;
position:absolute;
bottom: 100%;
left: -50%;
border: 2px solid red;
}
.primary-navigation li:hover > ul {
position: absolute;
display: block;
width: 600px;
}
.primary-navigation li {
float: left;
position: relative;
font-size: 20px;
}
.primary-navigation li ul li {
float: left;
position: relative;
font-size: 15px;
}
.primary-navigation a {
color: #FFF;
display: block;
line-height: 16px;
padding: 9px 15px;
text-decoration: none;
}
<nav class="primary-navigation">
<ul>
<li>Ahoj</li>
<li>Test A
<ul>
<li>Test 1</li>
<li>Test 2
<ul>
<li>Test A</li>
<li>Test B</li>
<li>Test C</li>
</ul></li>
<li>Test 3</li>
</ul></li>
<li>Test B
<ul>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul></li>
</ul>
</nav>
I know, that there is a problem in li > ul part, when is
position:absolute;
bottom: 100%;
left: -50%;
I know, that "left" give me a horizontal position.
The problem is, how to get this second row to the left and make it wide full length

Answer 1

Here you go, you have to delete the position: relative out of your children <li> elements, because this is the reason the children of those will align absolute to it's parent (<li> and not the <nav> itself.) Further, you've to do a little trick with the border, because it affects the absolute positioning. So here I use box-shadow on the left side of your elements to achieve the same effect without a border. border-bottom is not needed, because you stack the elements anyway.
CSS for border "trick"
border-right: 2px solid red;
border-top: 2px solid red;
box-shadow: inset 2px 0 0 red //imitates a border-left
SNIPPET
html * {
box-sizing: border-box;
}
.primary-navigation {
clear: both;
float: left;
display: block;
position: relative;
width: 100%;
top: 80px;
border: 0;
box-shadow: inset 0 0 0 2px red;
}
.primary-navigation ul {
list-style: none;
margin: 0;
padding-left: 0;
}
.primary-navigation ul > li,
.primary-navigation ul > li > ul > li,
{
float: left;
padding: 3px 5px;
margin: 10px 5px;
cursor: pointer;
}
.primary-navigation ul ul ul li {
float: none;
}
.primary-navigation li > ul {
display: none;
position:absolute;
bottom: 100%;
left: 0;
border-right: 2px solid red;
border-top: 2px solid red;
box-shadow: inset 2px 0 0 red
}
.primary-navigation li:hover > ul {
position: absolute;
display: block;
width: 600px;
}
.primary-navigation li {
float: left;
font-size: 20px;
}
.primary-navigation li ul li {
float: left;
font-size: 15px;
}
.primary-navigation a {
color: #FFF;
display: block;
line-height: 16px;
padding: 9px 15px;
text-decoration: none;
}
<nav class="primary-navigation">
<ul>
<li>Ahoj</li>
<li>Test A
<ul>
<li>Test 1</li>
<li>Test 2
<ul>
<li>Test A</li>
<li>Test B</li>
<li>Test C</li>
</ul></li>
<li>Test 3</li>
</ul></li>
<li>Test B
<ul>
<li>Test 4</li>
<li>Test 5</li>
<li>Test 6</li>
</ul></li>
</ul>
</nav>