Drupal 7 main menu text overlapping - drupal

Question

I have set up a site with Drupal 7, using the theme called "Professional Theme". I've found problem with text-overlapping on the main menu. There are two rows in my top menu bar. I've found the drop-down menu text has overlapped with the text on the text on the 2nd row of the menu. And I can't click on the links on that drop-down menu as it would simply disappear when I move the cursor downward. May anyone tell me what's wrong with it and how to fix it?
#main-menu {
min-height:35px;
box-shadow:0 0 3px #999;
background:#000033;
background:-moz-repeating-linear-gradient(#666699, #000033 35px);
background:-webkit-repeating-linear-gradient(#666699, #000033 35px);
background:-o-repeating-linear-gradient(#666699, #000033 35px);
background:-ms-repeating-linear-gradient(#666699, #000033 35px);
background:repeating-linear-gradient(#666699, #000033 35px);
}
#main-menu ul {
float:left;
padding:0;
margin:0;
max-width:75%;
list-style:none;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
font-weight:bold;
}
#main-menu li {
position:relative;
float:left;
padding:0;
margin:0;
line-height:35px;
z-index:100;
list-style-image:url(none);
}
#main-menu li li{
line-height:13px;
}
#main-menu ul li:first-child {
padding-left:0;
}
#main-menu a {
display:block;
padding:0 20px;
color:#f0f0f0;
text-align:center;
text-decoration:none;
}
#main-menu a:hover,
#main-menu li > a.active {
background:#3366cc;
background:-moz-linear-gradient(#3399ff,#000033);
background:-webkit-linear-gradient(#3399ff,#000033);
background:-o-linear-gradient(#3399ff,#000033);
background:-ms-linear-gradient(#3399ff,#000033);
background:linear-gradient(#3399ff,#000033);
color:#fff;
text-decoration:none;
}
#main-menu li > a.active {
background:#cc66ff;
background:-moz-linear-gradient(#cc66ff,#000033);
background:-webkit-linear-gradient(#cc66ff,#000033);
background:-o-linear-gradient(#cc66ff,#000033);
background:-ms-linear-gradient(#cc66ff,#000033);
background:linear-gradient(#cc66ff,#000033);
}
.drop-down-toggle {
position:absolute;
top:7px;
right:16px;
display:none;
width:20px;
height:20px;
border-radius:15px;
background:#000033;
background:-moz-linear-gradient(#666699,#000033);
background:-webkit-linear-gradient(#666699,#000033);
background:-o-linear-gradient(#666699,#000033);
background:-ms-linear-gradient(#666699,#000033);
background:linear-gradient(#666699,#000033);
border:#aaa 3px solid;
}
.drop-down-arrow {
display:block;
width:0;
height:0;
margin:8px 0 0 5px;
border-top:5px solid #aaa;
border-left:transparent 5px solid;
border-right:transparent 5px solid;
}
#main-menu li li {
float:none;
min-width:190px;
padding:0;
margin:0;
}
#main-menu li li a {
min-width:190px;
margin:0;
background:#555;
border-top:#5f5f5f 1px solid;
font-size:13px;
line-height:33px;
text-align:left;
overflow:hidden;
}
#main-menu li li li a {
min-width:260px;
margin:0;
background:#555;
border-top:#5f5f5f 1px solid;
font-size:13px;
line-height:33px;
text-align:left;
overflow:hidden;
}
#main-menu li li:first-child > a {
border-top:none;
}
#main-menu li li a:hover {
background:#444;
}
#main-menu li ul {
display:none;
position:absolute;
z-index:9999;
min-width:190px;
height:auto;
padding:0;
margin:0;
box-shadow:0 0 3px #333;
}
#main-menu li ul ul {
margin:-33px 0 0 190px !important;
}
#main-menu li:hover > ul,
#main-menu li li:hover > ul,
#main-menu li li li:hover > ul {
display:block;
}
#main-menu .nav-toggle {
display:none;
}
#main-menu ul li.leaf, #main-menu ul li.expanded, #main-menu ul li.collapsed {
list-style:none;
}
#main-menu ul.menu li {
margin: 0;
}
#main-menu li.expanded, #main-menu li.collapsed, #main-menu li.leaf {
margin: 0;
padding: 0;
}
Actually the css here is based on the original css for main menu in the Professional Theme.