How to add a drop down menu to my webite

How to add a drop down menu to my webite

Hello everyone, I'm having trouble adding a drop down menu. After trying for hours to get it to work, I just finally restored my menu to the way it was and decided to ask for help.

I can give you more code if needed but here is my HTML for my menu
  1. <div class="menu-wrapper">
  2.   <div class="menu">
  3.     <ul>
  4.       <li><a href="index.html" class="active">Home</a></li>
  5.       <li><a href="about.html">About Us</a></li>
  6.       <li><a href="tutorials.html">Tutorials</a></li>
  7.             <ul><li><a href="tutorials.html">Testing 1</a></li></ul>
  8.             <ul><li><a href="tutorials.html">Testing 2</a></li></ul>
  9.             <ul><li><a href="tutorials.html">Testing 3</a></li></ul>
  10.       <li><a href="contests.html">Contests</a></li>
  11.       <li><a href="faq.html">FAQ</a></li>
  12.       <li><a href="contact.html">Contact Us</a></li>
  13.     </ul>
  14.   </div>
  15. </div>


My CSS:
  1. .menu-wrapper{width:1000px; margin:0 auto; margin-top:116px; background:#2e3b4b; overflow:hidden;}
  2. .menu{width:634px; float:left; margin-top:20px; margin-left:20px; margin-bottom:20px}
  3. .menu ul li{float:left; width:100px; margin-right:4px;}
  4. .menu ul li a{width:100px; height:40px; line-height:40px; display:block; font-family: 'Open Sans', sans-serif; font-size:14px; color:#96577a; text-align:center; text-transform:uppercase;}
  5. .menu ul li a:hover{background:#96577a; color:#ffffff; width:100px; height:40px;}
  6. .menu ul li a.active{background:#96577a; color:#ffffff; width:100px; height:40px;}

My JS Code:
  1. $('menu ul li').hover(
  2.   function() {
  3.     $('ul', this).stop().slideDown(200);
  4.   },
  5.   function() {
  6.     $('ul', this).stop().slideUp(200);
  7.   }
  8. );


To make it clear I have my linked css file, jquery library, and js file in my page

  2. <!-- CSS File -->
  3. <link href="css/styles.css" rel="stylesheet" type="text/css" />
  4. <!-- Script element for jQuery Library -->
  5. <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
  6. <!-- Script element for Three Cats Design js -->
  7. <script src="js/threecatsdesign.js"></script>

I'm at lost and new to jQuery. Help would be very much appreciated.