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

Question

I'm running into a problem trying to style a drop down menu with a second level. Wordpress seems to apply the same .sub-menu class to any and all sub menus, and I can't figure out a reliable, cross-browser way to target the 1st level .sub-menu without also hitting the 2ne level .sub-menu. Example:

Example URL: http://getc.thefstopdesign.com/

Look under the Products menu item to see my problem. The Saddles & Accessories item has a sub menu of its own that I want to fly out to the side, but it is getting hit with the first level sub menu CSS.

Basic menu code I get from WordPress:

<ul id="main-menu-nav">
    <li><a href="">one</a></li>
    <li><a href="">two</a>
           <ul id="sub-menu">
               <li><a href="">sub-one</a></li>
               <li><a href="">sub-two</a>
                   <ul class="sub-menu">
                       <li><a href="">sub-sub-one</a></li>
                       <li><a href="">sub-sub-two</a></li>
                   </ul>
               </li>
           </ul>
    </li>
    <li><a href="">three</a>

Basic drop down CSS I am using:

#main-menu-nav li{
    position: relative;
}
#main-menu-nav .sub-menu{
    position: absolute;
    left: -9999px;
}
#main-menu-nav li:hover .sub-menu{
    left: 0;
}

It would be great if the second level menu could just vet a different CSS class, but I can't find a way to do it.

EDIT: I figured out my cCSS child selector problem and got everything working OK. It was a unrelated issue, related to an error I had made elsewhere in the CSS< which I won;t bore you with.

I also realized a very easy way to add this functionality with jQuery. Something like this:

$('#menu-main-nav > li > ul').addClass("sub-one");
$('#menu-main-nav > li > ul > li > ul').addClass("sub-two");` 

Answer 1

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.