Menu horizontal desplegable

saludos, tengo un menu horizon con submenus que se muestran a la derecha,
http://zorpstudio.cl/cloverdale/
el problema es que cuando me muevo hacia los submenus el menu principal deja de estar en hover

la idea seria que al moverse dentro de los submenus el principal se mantenga como en hover

Código HTML :

<nav>
    <ul id="mainmenu">
      <li id="horizontal">
          <a href="#" class="vision">Vision</a>
               <ul style="" id="SubMenuY2" class="submenu">
                  <li><a href="vision_architect.html">Architect</a></li>
                  <li><a href="vision_developer.html">Developer</a></li>
                  <li><a href="vision_sales.html">Sales & Marketing</a></li>
               </ul>
          </li>

          <li id="horizontal" class=" ">
           <a class="gallery" href="#">Gallery</a>
                 <ul style="" id="SubMenuY2" class="submenu">
                    <li><a href="gallery_neighborhood.html">Neighborhood</a></li>
<!--                    <li><a href="gallery_finish_close_up.html">Finish close ups</a></li>-->
                    <li><a href="gallery_model_unit.html">Model Unit</a></li>
                    <li><a href="gallery_building_exterior.html">Building exterior</a></li>
            </ul>
          </li>
          
          <li id="horizontal" class=" ">
           <a class="residences" href="#">Residences</a>
                 <ul style="" id="SubMenuY2" class="submenu">

                    <li><a href="residences_intro.html">Intro</a></li>
                    <li><a href="residences_floor_plans.html">Floor Plans</a></li>
                    <li><a href="residences_interiors.html">Interiors</a></li>
                    <li><a href="residences_building_amenities.html">Building Amenities</a></li>
                                        
                 </ul>
          </li>
          
          <li id="horizontal" class=" ">
           <a class="neighborhood" href="#">Neighborhood</a>
                 <ul style="" id="SubMenuY2" class="submenu">
                    <li><a href="neighborhood.html">Miracle Mile</a></li>
                    <li><a href="neighborhood_map.html">Neighborhood Map</a></li>
                 </ul>
          </li>
          
          <li id="horizontal" class=" ">
           <a class="contact" href="#">Contact</a>
                <ul style="" id="SubMenuY2" class="submenu">
                    <li><a href="contact_interest.php">Interest list sign up</a></li>
                    <li><a href="contact_map.html">Location/Contact info</a></li>
                    <li><a href="contact_preferred_lender.html">Preferred Lender (PQ Form)</a></li>   
            </ul>
          </li>

    </ul>
</nav>

Código CSS :

#mainmenu {
  margin: 0;
  padding: 0;
  list-style-type: none;
  filter:alpha(opacity=99);-moz-opacity:.99;opacity:.99;
}

#mainmenu li {
   clear: left;
}

#mainmenu a {
   display: block;
   overflow: hidden;
   float: left;
}


.active {
   height:100px;
}

.submenu {
  list-style-type: none; 
  float: left;
  display: none;
}

#mainmenu li a:hover+.submenu, .submenu:hover {
  display: block;
} 

.submenu li {
  display: inline; 
  clear: none !important;
}

.submenu li a {
  float: left;
  margin-left: 10px;
}

#mainmenu #horizontal a {
    font-family: 'Raleway', sans-serif !important;
   font-weight:300;
   font-size: 25px;
   color:#FFF;
   margin-left:43px;
   text-decoration:none;
   line-height:30px;
   letter-spacing:-0.02em;
   cursor: default;
   height:30px;
}

#mainmenu #horizontal .vision {
   height:30px;
   width:111px;
   text-indent: -5000px;
   background-image:url(images/btns/vision.png);
   }
   
#mainmenu #horizontal .vision:hover {
   height:30px;
   width:111px;
   background-image:url(images/btns/vision_over.png);
   }

   
   
#mainmenu #horizontal .gallery {
   height:30px;
   width:115px;
   text-indent: -5000px;
   background-image:url(images/btns/gallery.png);
   }
   
#mainmenu #horizontal .gallery:hover {
   height:30px;
   width:115px;
   background-image:url(images/btns/gallery_over.png);
   }      
   
#mainmenu #horizontal .residences {
   height:30px;
   width:170px;
   text-indent: -5000px;
   background-image:url(images/btns/residences.png);
   }
   
#mainmenu #horizontal .residences:hover {
   height:30px;
   width:170px;
   background-image:url(images/btns/residences_over.png);
   }         
   
#mainmenu #horizontal .neighborhood {
   height:30px;
   width:200px;
   text-indent: -5000px;
   background-image:url(images/btns/neighborhood.png);
   }
   
#mainmenu #horizontal .neighborhood:hover {
   height:30px;
   width:200px;
   background-image:url(images/btns/neighborhood_over.png);
   }   
   
   
#mainmenu #horizontal .contact {
   height:30px;
   width:130px;
   text-indent: -5000px;
   background-image:url(images/btns/contact.png);
   }   
   
#mainmenu #horizontal .contact:hover {
   height:30px;
   width:130px;
   text-indent: -5000px;
   background-image:url(images/btns/contact_over.png);
   }               
   

/*#mainmenu #horizontal a:hover {
   background-color: #f2f2f2;
   color:#484549;
   font-weight:500;
}*/

#mainmenu #SubMenuY2 a {
   font-family: 'Raleway', sans-serif!important;
      font-weight: 300;
   background-color: #ffffff;
   color:#484549;
   font-size: 13px;
   width: auto;
   margin: auto;
   padding: 0 15px;
   cursor: pointer;
   text-align:center;
}


#mainmenu #SubMenuY2 a:hover {
      font-weight: 500;
   text-align:center;
   font-size: 13px;
   width: auto;
   margin: auto;
}

me dijeron por ahi que con este scrip deberia funcionar pero nada

Código :

<script type="text/javascript">

$('#mainmenu li').hover(
   function(){
      $(this).children('a').addClass('itemOver');
      $(this).children('ul').show();
   },function(){
      $(this).children('a').removeClass('itemOver');
      $(this).children('ul').hide();
        }
);
</script>

yo creo que por ahi va la cosa pero no logro hacerlo funcionar!!

gracias por la ayuda!!!