title: Sub-menu vertically align
body: <p>I've got a simple menu that should show a sub-menu vertically. However, i changed this menu to be in order to center it, and it now doesn't show vertically but horizontally. </p>
  
  <p>Here is my codepen : </p>
  
  <p><a href="http://codepen.io/anon/pen/NGwmGq" rel="nofollow noreferrer">http://codepen.io/anon/pen/NGwmGq</a></p>
  
  <pre><code>    .navitem{
  height: 30px;
  }
  
  #menu ul {
   margin:0;
   padding:0;
   list-style-type:none;
   text-align:center;
   }
  #menu li {
  
   background-color:black;
   display: inline-block;
   padding: 0;
   vertical-align: middle;
   }
  #menu li a {
   display:block;
   width:125px;
   color:white;
   text-decoration:none;
   line-height:30px
  
   }
  #menu li a:hover {
   color:#FFD700;
   }
  
  #menu ul li ul {
   display:none;
   }
  
   #menu ul li:hover ul {
   display:block;
   }
  
  #menu li:hover ul li {
   float:none;
  
  
   }
  
  #menu li ul {
   position:absolute;
   } 
  
  #menu {
   height:30px;
   margin-top: 30px;
  
   } 
  
  .table {
      display: table;   /* Allow the centering to work */
      margin: 0 auto;
  }
  /* Logo */ 
  #logo{
   height: 190px;
   width: 266px;
    background-color:black;
    margin: 0 30px;
  }
  /* Fin MENU */
  </code></pre>
  
  <p>As you can see, the "portfolio" actually shows the sub-menu but this sub-menu should be vertically aligned. </p>