How to get a vertical submenu instead a horizontal one? - html

Question

I developed a submenu with CSS & jQuery and my intention was that it was vertical submenu but I´m getting a horizontal menu.
I already tried to "play" with display in CSS but its not working, like #menu ul li ul li a {display: inline-block;}.
Anyone there knows the trick to put this submenu vertical?
My jsfiddle with full example:
http://jsfiddle.net/jcak/9EcnL/7/
My html:
<section id="menu-container">
<nav id="menu">
<ul>
<li>Home
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>Procuts
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
</ul>
</li>
<li>About</li>
<li>Contacts</li>
</ul>
</nav>
</section>
My css:
#menu ul li ul li {display: none;}
#menu-container
{
background:green;
width:100%;
height:46px;
float:left;
z-index:7;
}
#menu
{
width:960px;
height:auto;
margin:0 auto 0 auto;
}
#menu ul
{
list-style-type:none;
}
#menu ul li
{
display: inline-block;
float:left;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}
#menu ul li a
{
text-decoration:none;
color:#ccc;
display:block;
margin-right:5px;
height:46px;
line-height:46px;
padding:0 5px 0 5px;
font-size:20px;
}
#menu ul li a:hover
{
color:#fff;
}
#menu ul li ul {
position: absolute;
left: 0;
-webkit-padding-start: 0;
width: 300px;
}
#menu ul li ul li
{
color:#fff;
}

Answer 1

By default, a ul will be vertical.
The float:left is what is making this whole menu be horizontal instead.
Have a go at removing that and seeing how the menu behaves.

Answer 2

Working Fiddle
#menu ul li
{
display: inline-block;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}