Sub Nav doesnt display below horizontally - html

Question

I am creating a nav bar with further sub lists. The first sub list displays exactly how I want it, but the one below that does not. Rather than display horizontally below the initial sub nav bar, it displays vertically and to the right of it.
Does anyone have any idea why this is, I believe I am missing something but for the life of me cant find it.
I added a photo to explain what I would like. The red should appear where the blue is.
Appreciate your time!
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
color: white;
background: #787878;
background: linear-gradient(top, #787878 0%, #272727 100%);
background: -moz-linear-gradient(top, #787878 0%, #272727 100%);
background: -webkit-linear-gradient(top, #787878 0%, #272727 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 25px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #A8A8A8;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 15px 50px;
color: white;
text-decoration: none;
}
nav ul ul {
background: #505050;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: left;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 8px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #A8A8A8;
}
nav ul ul ul {
position: absolute;
left: 100%;
top: 0;
}
nav ul ul.ul-right {
right: 0;
}
<nav>
<ul>
<li>Players
<ul>
<li>Wonderkids
</li>
<li>Cheap Players
</li>
<li>Player Comparisons
</li>
</ul>
</li>
<li>Clubs
<ul>
<li>Club Info
</li>
<li>Transfer Budgets
</li>
<li>Sugar Daddys
</li>
</ul>
</li>
<li>Downloads
<ul>
<li>Tactics
</li>
<li>Shortlists
<ul>
<li>Various Shortlists
</li>
<li>Positional Shortlists
</li>
<li>Staff Shortlists
</li>
</ul>
</li>
</ul>
</li>
<li>Write-Ups
</li>
<li>Social
<ul class="ul-right">
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
<li>Affiliates
</li>
</ul>
</li>
<li>About Us
</li>
</ul>
</nav>

Answer 1

If You have no problem setting the width of the ul this might be a solution:
nav {
margin: 0 auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
color: white;
background: #787878;
background: linear-gradient(top, #787878 0%, #272727 100%);
background: -moz-linear-gradient(top, #787878 0%, #272727 100%);
background: -webkit-linear-gradient(top, #787878 0%, #272727 100%);
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
padding: 0 20px;
border-radius: 25px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: "";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #A8A8A8;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block;
padding: 15px 50px;
color: white;
text-decoration: none;
}
nav ul ul {
background: #505050;
border-radius: 0px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: left;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 8px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #A8A8A8;
}
nav ul ul ul {
position: absolute;
top: 100%;
width: 578px;
}
nav ul ul.ul-right {
right: 0;
}
<nav>
<ul>
<li>Players
<ul>
<li>Wonderkids
</li>
<li>Cheap Players
</li>
<li>Player Comparisons
</li>
</ul>
</li>
<li>Clubs
<ul>
<li>Club Info
</li>
<li>Transfer Budgets
</li>
<li>Sugar Daddys
</li>
</ul>
</li>
<li>Downloads
<ul>
<li>Tactics
</li>
<li>Shortlists
<ul>
<li>Various Shortlists
</li>
<li>Positional Shortlists
</li>
<li>Staff Shortlists
</li>
</ul>
</li>
</ul>
</li>
<li>Write-Ups
</li>
<li>Social
<ul class="ul-right">
<li>Facebook
</li>
<li>Twitter
</li>
<li>Youtube
</li>
<li>Affiliates
</li>
</ul>
</li>
<li>About Us
</li>
</ul>
</nav>