我怎麼不能集中這個純粹的CSS3下拉導航？

Question

我一直在試圖集中這個下拉導航，但我只是不能正確理解。有人在這裏有一個想法，爲什麼我不能做到這一點？我有一種感覺，它與第一個李元素的浮動有關，但我不確定。

的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