CSS: Menu Dropdown showing horizontally when I need vertical - html

Question

I am working on a navigational menu. I have a problem with the dropdown submenus. When I hover over the submenu, it shows the entries horizontally, but I want it vertically. Can someone please show me what I can do to fix it? Thanks.
Here's a fiddle.
Here is my CSS code:
#nav {overflow:hidden;
margin:0px auto;
text-align:center;}
#nav ul li {display:inline-block;
list-style:none;
vertical-align:top;
width:100px;}
#nav>ul>li>a>img {text-align:center;
width:100px;
height:100px;}
#nav a {text-decoration:none !important;}
#nav a:hover {text-decoration:underline !important;}
#nav > ul > li > ul {display:none;
z-index:999;
position:absolute;}
#nav li:hover ul {display:block;}
.submenu li {border-bottom:solid 1px #333333;
font-size:12px;}
.submenu img {display:inline;
vertical-align:middle;
width:25px;
height:25px;
float:left;
margin:5%}
.submenu li:hover {background-color:#CCC;}
Here is my HTML Code:
<div id="nav">
<ul>
<li>
<a href="">
<img src="images/placeholder.png">
Home
</a>
</li>
<li>
<a href="">
<img src="images/placeholder.png">
Menu w/ Submenu
</a>
<ul class="submenu">
<li>
<a href="">
<img src="images/placeholder.png">
Submenu Item
</a>
</li>
<li>
<a href="">
<img src="images/placeholder.png">
Submenu Item
</a>
</li>
</ul>
</li>
<li>
<a href="">
<img src="images/placeholder.png">
Menu Item
</a>
</li>
<li>
<a href="">
<img src="images/placeholder.png">
Menu Item
</a>
</li>
</ul>
</div>

Answer 1

The easiest way is to comment position:absolute; in your submenu.
#nav > ul > li > ul {display:none;
z-index:999;
/* position:absolute;*/}
Check this in action:
http://jsfiddle.net/5Kjg4/

Answer 2

Here is a DEMO
You have css class #nav ul li which makes sub menu align horizonatally..
one way to solve this is using !important property and ovveriding display property.
Better solution would be using psuedo classes
#nav ul li:not(.subItem) {display:inline-block;
list-style:none;
vertical-align:top;
width:100px;}
.subItem{
display:block;
}
this way inline-block is not applied to subItems.

Answer 3

you can add this to you css
// if you need position: absolute
#nav ul li ul li {
float: left; // float left for inner li
display: inline-block;
}
#nav ul li ul {
width: 100px; // set width for you'r ul
}

Answer 4

Change the following css in your code and it should work fine.
Problem was that you are displaying inline-block for all ul li.
Take a look at fiddle DEMO
#nav ul li {
display:inline-block;
list-style:none;
vertical-align:top;
width:100px;
}
To
#nav > ul > li {
display:inline-block;
list-style:none;
vertical-align:top;
width:100px;
}

Answer 5

Here is the solution to you problem
You just had to add display:block and float to your submenu li