Drop down menu disappearing

[imperialized]

Ok, Im having a little problem. I fixed the menu shifting, but now the menu disappears before it is supposed to. I am really not sure even how to tackle this, any help would be appreciated it.

 

Link: http://www.imperialized.com/new/index.php  -- Hover over the top menu link Dropdown.

 

The menu comes as it should, but as you work down the menu it will disappear even though your mouse is still hovered.

 

my CSS for the menu:

 

/** Navigation **/

#navigation {
    margin-left: 20px;
    margin-top: 40px;
    float: left;
}

#navigation ul{
    list-style: none;
    margin-left: 20px;
    }
    
#navigation li{
    display: inline-block;
    text-align: center;
    margin: 0 2px 0 2px;
    width: 125px;
    height: 30px;
    border-radius: 5px;
    vertical-align: middle;
    background: #27343C;
}

#navigation li a.active{
    background: #FC4F83;
}

#navigation a{
    color: #FFFFFF;
    font: bold;
    text-decoration: none;
}

#navigation a:hover{
    text-decoration: underline;
}

#navigation li ul{
    position: absolute;
    display: none;
}

#navigation li:hover > ul {
display: block;
}

/* SUB MENU CSS BELOW */

#navigation li ul li{
    display: block;
    margin-top: -1px;
    padding: 3px;
    width: 100px;
    height: 20px;
    font-size: 10pt;
    border-radius: 0px;
    border-left: 1px solid #6699dd;
    border-right: 1px solid #6699dd;
}
#navigation li ul li:first-child{
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    background: #6699dd;
    display: block;
    height: 5px;
    border: 0;
    width: 101.5px;
}

#navigation li ul li:first-child:hover, #navigation li ul li:last-child:hover{
    background: #6699dd;
}

#navigation li ul li:last-child{
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
    background: #6699dd;
    display: block;
    height: 5px;
    border: 0;
    width: 101.5px;
}


#navigation li ul li a{
    text-decoration: none;
}

#navigation li ul li a:hover{
    text-decoration: underline;
}

#navigation li ul li:hover{
    background: #FC4F83;
}

 

 

The navigation menu code:

print "<ul>
        <li class='active'><a href='#'>Home</a></li>
        <li><a href='#'>Profile</a></li>
        <li><a href=#>Dropdown</a>
        <ul>
        <li> </li>
        <li><a href=#>Sub Menu</a></li>
        <li><a href=#>Sub Menu</a></li>
        <li><a href=#>Sub Menu</a></li>
        <li><a href=#>Sub Menu</a></li>
        <li><a href=#>Sub Menu</a></li>
        <li> </li>
        </ul></li>
        ";

 

Any help with this would be greatly appreciated!! Thanks in advance.

[imperialized]

Bah, after so long you overlook the simple mistakes. Fixed this using z-index.