Help with flyout menu

Help with flyout menu

I'm trying to do a simple flyout menu. I am using a template already created by someone else. The top header navigation is acheived using an unordered list and CSS. It makes a horizontal nav menu for About Us, Products etc. What I would like to do is add onto this list and make sub menus that flyout. I have the jquery code to do this, but I cant get the CSS right for the sub-menu because the CSS from the top level UL is bleeding into the sub menus. This may actually be more of a CSS thing than jquery, but any help would be appreciated. Here is what I have right now. I need to do the CSS for the "sub-menu" class.


CSS:
ul { list-style:none;}
.site-nav { width:100%;}
.site-nav li { float:left; text-transform:uppercase; font-size:11px; font-weight:bold; height:83px;}
.site-nav li a {float:left; color:#fff; text-decoration:none; display:block; padding:31px 0 36px 0; text-align:center; width:110px;}


JQUERY:
<script type="text/javascript">
$(document).ready(function() {
  $('ul.site-nav > li').hover(function() {   
   $('ul:first', this).show();
  },
  function() {
    $('ul:first', this).hide();
  });

  $('ul.site-nav li li').hover(function() {
    $('ul:first', this).each(function() {     
      $(this).show();
    });
  },
  function() {
    $('ul:first', this).hide();
  });
});
</script>

HTML:
<ul class="site-nav">
    <li class="first"><a href="#" class="m1">About Us</a>
        <ul class="sub-menu">
            <li><a href="#">Test Entry</a></li>               
            <li><a href="#">Test Entry</a>
                <ul class="sub-menu">
                    <li><a href="#">Test Entry</a></li>                     
                    <li><a href="#">Test Entry</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#" class="m2">Products</a></li>
    <li><a href="#" class="m3">How Turbos Work?</a></li>
    <li><a href="#" class="m4">FAQs</a></li>
    <li><a href="#" class="m5">Quality Assurance</a></li>
    <li><a href="#" class="m6">Turbo Talk</a></li>
    <li><a href="#" class="m7">Site Login</a></li>
    <li><a href="#" class="m8">Downloads</a></li>
</ul>