Is there any way to change the CSS class applied to 2nd level sub menu ul’s?

I had gone through the given link in your question and using firebug i have added and remove some css rules. Please have look on the below css rules.

#menu-main-nav .sub-menu {
  /*left:-9999px;*/ // remove from line 648
}


#menu-main-nav .flyout-parent .sub-menu {
  background: none repeat scroll 0 0 rgba(255, 232, 198, 0.95);
  border-color: #AAAAAA;
  border-style: solid;
  border-width: 1px 1px 1px 0;
  /*left:-9999px;*/ // remove from line 677
  opacity: 0;
  position: absolute;
  width: 240px;
  visibility:hidden; // add this on line 677
}

#menu-main-nav .flyout-parent:hover .sub-menu {
  left: 100%;
  opacity: 1;
  top: -2px;
  visibility: visible; // add this on line 691 
}


#menu-main-nav li:hover .flyout-parent .sub-menu {
  /*left:-9999px;*/ // remove from line 688
  left:100%; 
}

Please leave a comment if you get any problem or changes required.

Note: I have just checked using firebug. So please backup your css and then change/update your css.