Sub-menu vertically align - html

Question

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.
Here is my codepen :
http://codepen.io/anon/pen/NGwmGq
.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 */
As you can see, the "portfolio" actually shows the sub-menu but this sub-menu should be vertically aligned.

Answer 1

You seem to have deleted the positioning context on the li
#menu li {
background-color: black;
display: inline-block;
padding: 0;
vertical-align: middle;
position: relative; /* add this */
}

Answer 2

For li you have given display as inline-block that,s why they are coming in one line. so for portfolio submenu Write this css in your css file
#menu ul li ul li {
display: block;
}

Answer 3

In your css, you're making all main menu items inline using #menu li selector, which is also applied for lis in sub menu.
So you've to explicitly specify display: block for sub menu lis
Change your code as given below.
#menu li:hover ul li {
float:none;
display:block;
}

Answer 4

Just Add display:block to your sub menu li.
#menu li:hover ul li {
float:none;
display:block; /* Add This */
}
UPDATED : EXPLANATION
1) display:block; property is a block property in HTML. So every element with such property takes a new line(Elements views Vertically).
2) display:inline-block; property is a block but inline property. So elements which such property appears on same single line(Elements views Horizontally).
Working : Fiddle