Categories dropdown menu/css

Hi all I seem to be having some trouble with this. I have a drop down menu on my site which works fine, I tweaked tpl_top_nav to include a level 3, 4 and 5. Now sub menus appear when you hover over the drop down menu, I wish to have them appear when a customer moves the cursor over that sub category. I think the answer lies somewhere in the CSS I don't know where to change it or add to it.

I would seriously appreciate if somebody could help me out.

http://www.kidsartandcraft.co.uk/

Here is my sample:

<?php
require_once (DIR_WS_CLASSES . 'categories_ul_generator.php');
?>

<div id="main_menu_wrapper" class="accordion">
<div id="menu_mobile_icon">
<h3>MENU</h3>
</div>
<?php
$zen_CategoriesUL = new zen_categories_ul_generator;
$menulist = $zen_CategoriesUL->buildTree(true);

$menulist = str_replace('class="level1"','id="main_menu"',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="menu_item down">',$menulist);
$menulist = str_replace('"level2"','"sub_menu sub_menu_2"',$menulist);
$menulist = str_replace('&amp;','&',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="menu_item down">',$menulist);
$menulist = str_replace('"level3"','"sub_menu sub_menu_3"',$menulist);
$menulist = str_replace('&amp;','&',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="menu_item down">',$menulist);
$menulist = str_replace('"level4"','"sub_menu sub_menu_4"',$menulist);
$menulist = str_replace('&amp;','&',$menulist);
$menulist = str_replace('<li class="submenu">','<li class="menu_item down">',$menulist);
$menulist = str_replace('"level5"','"sub_menu sub_menu_5"',$menulist);
$menulist = str_replace('&amp;','&',$menulist);

echo $menulist;
?>
<div class="clear"></div>
</div>


My css is:

.footer_top_item h3 {
font-size:1.7em;
line-height:1.6em;
margin: 0 0 0.65em;
padding: 0 0 0 40px;
text-align: left;
}
#main_menu > li {
position: relative;
float: left;
}
#menu_mobile_wrapper {
display: none;
}
#main_menu li a {
font-family: 'Source Sans Pro', Arial;
font-size: 18px;
color: white;
float: left;
font-weight: 600;
background: url(../images/bg_li_nav.png) no-repeat right;
padding: 3px 13px;
text-shadow:-1px -1px 0px #cc9f52;
}
#main_menu ul.sub_menu a {
background: none
}
#main_menu li a:hover {
color: #fff
}
#main_menu li.last_item a {
background: none
}
#main_menu li:hover {
background: #f4a300;
background: -webkit-gradient(linear, left top, left bottom, from(#dc9300), to(#f4a300));
background: -webkit-linear-gradient(top, #dc9300, #f4a300);
background: -moz-linear-gradient(top, #dc9300, #f4a300);
background: -ms-linear-gradient(top, #dc9300, #f4a300);
background: -o-linear-gradient(top, #dc9300, #f4a300);
background-image: -ms-linear-gradient(top, #dc9300 0%, #f4a300 100%);
}
#main_menu ul.sub_menu {
display: none;
position: absolute;
z-index: 99999;
top: 44px;
left: 0px;
background: #FFFBDE;
border-radius: 8px;
padding: 15px 0;
border: 1px solid #E1B356;
box-shadow: 1px 3px 6px #444;
-webkit-box-shadow: 1px 3px 6px #444;
-moz-box-shadow: 1px 3px 6px #444;
width:180px;
list-style: none;
list-style-position: inside;
}
#main_menu ul.sub_menu > li {
margin-top: 8px;
margin-left:15px;
position: relative;
color: #030000;
text-indent: 4px;
padding: 0;
font-size: 12px;
width: 100%;
line-height: 25px;
background: none;
}
#main_menu ul.sub_menu a {
line-height: 18px;
font-size: 15px;
float: none;
font-family: 'Source Sans Pro', Arial;
padding: 0;
font-weight: normal;
text-shadow:none !important;
color: #4d4c4b;
}
#main_menu ul.sub_menu li:hover, #main_menu ul.sub_menu li:hover a {
color: #895c00;
font-weight: normal;
}
#main_menu > li:hover ul.sub_menu {
display: block;
}
.mobile {
display: none;
}
html[xmlns*=""]:root #primary_product_details #brandPrev {
background-size: 105%;
width: 8.5%
}
#cart_summary thead tr {
height: 60px;
}
table#cart_summary thead th {
background: url(../images/bg_tr_cart.png) no-repeat center center;
}
table#cart_summary thead th.first_item {
background: url(../images/bg_tr_cart.png) no-repeat left center;
}
table#cart_summary thead th.last_item {
background: url(../images/bg_tr_cart.png) no-repeat right center;
}

Okay I have figured it out.

Although I am having trouble with level 4 menu, I have got level 5 to work.

/*/ This is the start of sub category level 4/*/

#main_menu ul.sub_menu > li > ul.sub_menu > li >ul.sub_menu {
display: none;
position: absolute;
z-index: 99999;
top:0;
left: 50px;
background: #FFFBDE;
border-radius: 8px;
padding: 15px 0;
border: 1px solid #E1B356;
box-shadow: 1px 3px 6px #444;
-webkit-box-shadow: 1px 3px 6px #444;
-moz-box-shadow: 1px 3px 6px #444;
width:180px;
list-style: none;
list-style-position: inside;
}

#main_menu ul.sub_menu > li > ul.sub_menu > li > ul.sub_menu a {
line-height: 18px;
font-size: 15px;
float: none;
font-family: 'Source Sans Pro', Arial;
padding: 0;
font-weight: normal;
text-shadow:none !important;
color: #4d4c4b;
}


#main_menu > li:hover ul.sub_menu > li:hover ul.sub_menu {
display: block;
}

/*/ This is the end of sub category level 4/*/