<style type="text/css">
 .menu tr.secondary-menu { display: none; }
 .menu tr.active { display: table-row; }
</style>


<table class="menu">
 <tr class="mainmenu">
  <td id="mm-1">Photography</td>
  <td id="mm-2">Animals</td>
  <td id="mm-3">etc.</td>
 </tr>

 <!-- пусть в данный момент активным является пункт Animals главного меню -->

 <tr id="sm-1" class="secondary-menu"><td>Photography home</td><td>Photo of the Day</td><td>Galleries</td></tr>
 <tr id="sm-2" class="secondary-menu active"><td>Animals Home</td><td>Facts</td><td>Photos</td></tr>
 <tr id="sm-3" class="secondary-menu"><td>...</td></tr>

</table>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>

<script type="text/javascript">
 $('.menu tr.mainmenu td').mouseover(function() {
  var N = $(this).attr('id').replace('mm-', '');
  $('.menu tr.secondary-menu').css('display', 'none');
  $('.menu tr#sm-' + N).css('display', 'table-row');  
 });
 
 $('.menu').mouseout(function() {
  $('.menu tr.secondary-menu').css('display', 'none');
  $('.menu tr.active').css('display', 'table-row');  
 });

</script>