Submenu will hover but disappears on mouse over

I am stuck on this once issue with my main menu. Can someone shed some light on the situation. I can hover over my menu items and the submenu will display like I would like, but once I try to click on an item in the submenu and mouse over, the submenu disappears. Any help will be greatly appreciated. Here is my code. Thanks,

[code]
'.main-menu {
display:block;
width:960px;
float:left;
background:#FFF;
margin-top:-30px;
margin-left:40px;
height:65px;
}

.main-menu a {
display:block;
}

.main-menu- li {
position: relative;
background:#FFF;
display:block;
float:left;
}

.main-menu ul {
margin-top:15px;
margin-left:115px;
position:absolute;
list-style:none;
list-style-position:outside;
}
.main-menu ul li {
padding-right:35px;
font-size: 20px;
float:left;
border:none;
font-family:Georgia, "Times New Roman", Times, serif;
text-decoration:none;
color:#283f91;
position:relative;
}

.main-menu li a {
text-decoration:none;
color: #283f91;
display:block;
}

.main-menu li a:hover {
text-decoration:underline;
}

.main-menu ul ul {

left: 0;
text-align:left;
margin-left:-40px;
float:left;
display:none;
z-index: 99999;
}

.main-menu ul li:hover > ul {
position:absolute;
top: 100%;
opacity: 1;
display:block;
}

.main-menu ul ul li {
display:block;
float: none;
width: 250px;
font-size:14px;
}

.main-menu ul ul li a {
display:block;
padding: 5px 10px;
}'
[endcode]