This is bullet proof down to IE7- Yea!
As used by WooThemes for their great work – check out this JS Fiddle.

<ul class="menu">
<li class="parent"><a href="#">Parent</a>
<ul>
<li><a href="#">Child</a></li>
<li class="parent"><a href="#">Link</a>
<ul>
<li><a href="#">Grand Child</a></li>
<li class="parent"><a href="#">Link</a>
<ul>
<li><a href="#">Great Grand Child</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="parent"><a href="#">Link</a>
<ul>
<li><a href="#">Great Great Grand Child</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li class="parent"><a href="#">Link</a>
<ul>
<li><a href="#">Great Great Great Grand Child</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>

Just use this css:

ul.menu {
position: relative;
margin-bottom:0;
li {
position: relative;
float: left;
zoom:1;
list-style: none;
a {
display: block;
padding:.382em 1em;
background:#eee;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
&.parent { // Styles applied to all parent list items
> a:after {
content:"\2193";
line-height:1;
margin-left:1em;
float:right;
}
}
}
/* CHILDREN */
ul {
width:10em;
visibility: hidden; // Optionally use display:none to avoid horizontal scrollbars
position: absolute;
top:100%;
left: 0;
z-index: 9999;
margin:0;
li {
float: none;
a {
width: 100%;
display: inline-block;
}
&.parent {
> a:after {
content:"\2192";
}
}
}
}
ul ul {
left:100%;
top:0;
}
li:hover > ul {
visibility: visible;
}
}