为什么我不能将这个纯粹的 CSS3 下拉导航居中？

Question

我一直在尝试将此下拉导航居中，但就是做不好。这里有人知道为什么我不能这样做吗？感觉跟第一个li元素的浮动有关系，但我不确定。

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><a href="#">Test1</a></li>
            <li><a href="#">Test2</a></li>
            <li>
                <a href="#">Test3</a>
                <ul>
                    <li><a href="#">DropdownTest1</a></li>
                    <li><a href="#">DropdownTest2</a></li>
                    <li><a href="#">DropdownTest3</a></li>
                </ul>
            </li>
            <li><a href="#">Test4</a></li>
            <li>
                <a href="#">Test5</a>
                <ul>
                    <li><a href="#">DropdownTest1</a></li>
                    <li><a href="#">DropdownTeasdadst2</a></li>
                    <li><a href="#">DropdownTest3</a></li>
                </ul>
            </li>
        </ul>
    </nav>

Answer 1

添加这个 CSS:

ul#dropdown {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;        //cause #dropdown to "shrink-to-fit"
}

前三种样式基于流行的垂直居中方法，可在 http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ 找到。在这种情况下，我进行了更改，因此我们可以水平居中。

需要最后一种样式，因为块元素默认占据 100%，但行内块元素会收缩以适合其内容。

Updated Fiddle

为什么我不能将这个纯粹的 CSS3 下拉导航居中？

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

html

css

navigation