Submenu hides on hover - html

Question

I have HTML Menu and Submenu. For some reason, the submenu hides when I' am hovering over them. When I hover on the parent menu, submenu shows and as soon as am hovering over the submenu it hides.
HTML
<div id="main-menu">
<ul>
<li>Home<span class="sf-sub-indicator"><i class="icon-angle-down"></i></span><span class="sub">Start here</span></li>
<li>Features<span class="sf-sub-indicator"><i class="icon-angle-down"></i></span><span class="sub">remix all features</span>
<ul class="transparency">
<li>Accordion</li>
<li>Buttons</li>
<li>Typography</li>
</ul>
</li>
<li>MP3<span class="sub">full archive</span></li>
<li>Video<span class="sub">latest clips</span></li>
<li>Gallery<span class="sf-sub-indicator"><i class="icon-angle-down"></i></span><span class="sub">Photo Gallery</span>
<ul class="transparency">
<li>Gallery 4 Column</li>
<li>Gallery 3 Column</li>
<li>Gallery 2 Column</li>
</ul>
</li>
<li>Pages<span class="sf-sub-indicator"><i class="icon-angle-down"></i></span><span class="sub">more templates</span>
<ul class="transparency">
<li>RTL Support</li>
<li>Events</li>
<li>MP3 Single Wide</li>
</ul>
</li>
<li>Blog<span class="sf-sub-indicator"><i class="icon-angle-down"></i></span><span class="sub">latest news</span>
<ul class="transparency">
<li>Blog</li>
<li>Blog Left Sidebar</li>
<li>Blog Both Sidebar</li>
</ul>
</li>
</ul>
</div>
CSS
#main-menu{
float: right;
position: relative;
margin: 20px 0 0 -20px;
}
#main-menu ul{
float: right;
padding: 0;
position: relative;
margin: 0;
list-style: none;
}
#main-menu li{
float: left;
position: relative;
padding: 0;
}
#main-menu a{
padding:0 20px 22px 0;
display: block;
position: relative;
color: #fff;
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
font-weight: bold;
}
#main-menu li a span {
font-size: 12px;
font-family: tahoma;
font-weight: normal;
text-transform: none;
display: block;
color: #AFAFAF;
margin: 10px 0 0 0;
}
#main-menu li ul{
display: none;
position: absolute;
width: 170px;
word-break: break-all;
}
#main-menu li:hover > ul{
display: block;
margin-top: 11px;
}
#main-menu li > ul li{
display: block;
width: 100%;
}
#main-menu li > ul li a:hover{
display: block;
width: 100%;
background: #FFF;
color: #000;
}
#main-menu li > ul li a{
font-weight: normal;
padding: 8px 15px;
line-height: 20px;
color: #fff;
text-transform: none;
letter-spacing: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}

Answer 1

Live demo
Just replace the margin-top by padding-top in this CSS:
#main-menu li:hover > ul {
display: block;
margin-top: 11px;
}
So that it becomes:
#main-menu li:hover > ul {
display: block;
padding-top: 11px;
}
Proof:

Answer 2

you can update the
#main-menu li ul{
display: none;
position: absolute;
left:0;
top:0;
width: 170px;
word-break: break-all;
}
and
#main-menu li > ul li a{
font-weight: normal;
padding: 8px 15px;
line-height: 20px;
color: #000;
text-transform: none;
letter-spacing: 0;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
further alignments u cand update as u want

Answer 3

Change margin-top to padding-top, like so:
#main-menu li:hover > ul {
display: block;
padding-top: 11px;
}