How come I can't center this pure CSS3 dropdown navigation? - html

Question

I have been trying to center this dropdown navigation, but I just cant get it right. Does anyone here have an idea about why I can't do it? I have a feeling it has something to do with the floating of the first li elements, but I am not sure.
JSFiddle: https://jsfiddle.net/21e7p8Lx/
ul#dropdown {
list-style: none;
}
ul#dropdown li {
float: left;
background: darkgrey;
}
ul#dropdown li a {
display: inline-block;
padding: 20px 40px;
color: black;
text-decoration: none;
text-transform: uppercase;
font-size: 20px;
}
ul#dropdown li:hover {
background: grey;
}
ul#dropdown > li:not(:last-child) {
border-right: 1px solid white;
}
ul#dropdown li ul {
list-style: none;
display: none;
position: absolute;
margin-top: 0px;
}
ul#dropdown li:hover ul {
display: block;
}
ul#dropdown li ul li {
float: none;
border: none;
border-top: 1px solid white;
}
<nav>
<ul id="dropdown">
<li>Test1</li>
<li>Test2</li>
<li>
Test3
<ul>
<li>DropdownTest1</li>
<li>DropdownTest2</li>
<li>DropdownTest3</li>
</ul>
</li>
<li>Test4</li>
<li>
Test5
<ul>
<li>DropdownTest1</li>
<li>DropdownTeasdadst2</li>
<li>DropdownTest3</li>
</ul>
</li>
</ul>
</nav>

Answer 1

Add this CSS:
ul#dropdown {
position: relative;
left: 50%;
transform: translateX(-50%);
display: inline-block; //cause #dropdown to "shrink-to-fit"
}
The first three styles are based on a popular method for vertical centering, found at http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/. In this case, I've changed so we can horizontally center.
The last style is needed, because block elements take up 100% by default, but inline-block elements will shrink-to-fit their contents.
Updated Fiddle