Can't replicate this jump menu due to small brain

Can't replicate this jump menu due to small brain

I'm just trying to replicate this jump menu: http://filamentgroup.com/examples/RollAUI/jumpmenu.php

I don't want the ability to change theme or anything like that i simply want that menu.

I have tried for an hour and a half now and i have nothing. I feel useless.

Here follows some of my pathetic attempt.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html  xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <script type="text/javascript" src="/assets/js/jquery.js"></script>
        <script type="text/javascript">
$(function(){
         //ui states
         $('.ui-default-state').hover(function(){
               $(this).addClass('ui-hover-state');
               
            }, function(){
               $(this).removeClass('ui-hover-state');
            }
         );
         $('.ui-arrow-down-default').hover(function(){
               $(this).addClass('ui-arrow-down-hover');
            }, function(){
               $(this).removeClass('ui-arrow-down-hover');
            }
         );
         
         $("#jumpMenu").mouseover(function(ev){
            if ($(ev.target).is('.ui-active-state')){
               return false;
            }
         });
         
         
         //jump menu
         $('#menu').hide().find('li a').hover(
            function(){
               $(this).addClass('ui-hover-state');
            }, function(){
               $(this).removeClass('ui-hover-state');
            }
         ).click(function(){$('a#trigger').trigger('click');  return false;});
         $('a#trigger').click(function(){$($(this).attr('href')).slideToggle(); $(this).toggleClass('ui-active-state'); return false;});
         $(document).click(function(){if($('#menu').is(':visible')) $('a#trigger').trigger('click');});
         
});
</script>
   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
   <style type="text/css">
      .ui-default-state { padding: .5em 1em; cursor: pointer; }
      #trigger { text-decoration: none; display: block; width: 4em; position: relative; z-index: 2; }
      #trigger span { padding-right: 1.3em; background-position: right 50%; margin-right: 3px; }
      #trigger.ui-active-state { border-bottom: 0; }
      
      #menuContain { position: relative; z-index: 1; display:none; }
      #menu { position: absolute; width: 15em; background-image: none; padding: 0; list-style: none; margin: 0; top: -1px; }
      #menu li a  { padding: .5em 1em; border: 0; text-decoration: none; display: block; cursor: pointer; }
      #themes {padding-left: 20px; font-size: 1.2em; background: url(images/icon_gallery.gif) no-repeat left 50%;}
      #set {border: 2px solid #ddd; padding: 2px; background: #444; float: left;}
      #set a {margin: 2px; border: 1px solid #444; float: left;}
      #set a:hover {border-color: #fff;}
      </style>
   <title></title>
</head>
<body>
<div id="jumpMenu" class="ui-component">
   <a href="#menu" id="trigger"class="ui-default-state"><span class="ui-arrow-down-default">Menu</span></a>
   <div id="menuContain">
      <ul id="menu" class="ui-active-state">
         <li><a href="#">Nav Item</a></li>
         <li><a href="#">Nav Item</a></li>
         <li><a href="#">Nav Item</a></li>
         <li><a href="#">Nav Item</a></li>
      </ul>
   </div>
</div>
</body>
</html>


If anyone can help me and show me what i'm doing wrong that would be great. If not, that's okay, i don't mind wallowing in my own self pity.