Including Jquery

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

Structure

<ul id="menu-main-menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">About Us</a></li>
  <li><a href="#">Services</a>
   <!-- SUBMENU -->
    <ul style="display: none;">
      <li><a href="#">Live IT Support</a></li>
      <li><a href="#">On Site Support</a></li>
      <li><a href="#">Managed Email</a></li>
      <li><a href="#">Backup and Disaster Recovery</a></li>
    </ul>
   <!-- EOF SUBMENU -->
  </li>
  <li><a href="#">Clients</a></li>  <li><a href="#">Contact Us</a></li>
</ul>

Jquery

<script>
$(document).ready(function(){
$("ul.sub-menu").parent().mouseover(	  function(){
$(this).children('ul.sub-menu').show();
}	).mouseout(	   function(){
$(this).children('ul.sub-menu').hide();
});
});
</script>

Stylesheet

<style>
.navigation li{font-family:Arial, Helvetica, sans-serif; height:31px; font-size:12px; font-weight:bold; color:#ffffff; float:left; padding-left:25px; padding-right:25px; padding-top:24px; background:#304F9E; list-style:none;}
.navigation li a{ text-decoration:none; color:#ffffff;}
ul.sub-menu {padding:0px; margin:0px; position:absolute; z-index:1000; display:none; background-color:#304F9E; width:200px; padding-bottom:10px; margin-top:10px; margin-left:-10px; }
ul.sub-menu li {border-bottom:1px dotted #bbb; height:20px; clear:left; display:block; text-align:left; list-style:none outside none;width:180px; color:#fff; padding:5px; margin:5px;}
</style>

Demo

Click here for the demo