Javascript-форум - Плавно выпадающее меню

Добрый вечер.
Помогите пожалуйста не могу разобраться:
Надо как-то поменять так, чтобы меню выпадали^ когда клацаешь на кнопку "Click me". А в моем примере когда клацаешь на обьет div меню открывается.

P.S. Посоветуйте пожалуйста книгу по JavaScript с примерами.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Выравнивание по центру</title>
  <style type="text/css">
   #centerLayer {
    position: absolute; /* Абсолютное позиционирование */
    width: 800px; /* Ширина слоя в пикселах */
    height: 500px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 50%; /* Положение слоя от верхнего края */
    margin-left: -400px; /* Отступ слева */
    margin-top: -200px;	/* Отступ сверху */
    background: #fc0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки вокруг */
    padding: 10px; /* Поля вокруг текста */
    overflow: auto; /* Добавление полосы прокрутки */ 
   }
     #topLayer {
    position: absolute; /* Абсолютное позиционирование */
    width: 300px; /* Ширина слоя в пикселах */
    height: 50px; /* Высота слоя в пикселах */
    left: 50%; /* Положение слоя от левого края */
    top: 10%; /* Положение слоя от верхнего края */
    margin-left: -400px; /* Отступ слева */
    margin-top: -000px;	/* Отступ сверху */
    background: #ec0; /* Цвет фона */
    border: solid 1px black; /* Параметры рамки вокруг */
    padding: 10px; /* Поля вокруг текста */
    overflow: auto; /* */
     }

    div.menu {
        background:#ac3; margin:3px; width:80px;
        height:40px; display:none; float:left;
    }

  </style>

  <script src="http://code.jquery.com/jquery-latest.js"></script>

  <script>
  $(document).ready(function(){

    $(document.body).click(function () {
      if ($(".menu:first").is(":hidden")) {
        $(".menu").slideDown("slow");
      } else {
        $(".menu").hide();
      }
    });

  });
  </script>

 </head>
 <body>

 <div id="topLayer">
     <p>Menu</p>

 </div>

  <div id="centerLayer">
    Будем также считать, что сила даёт большую проекцию на оси, чем газообразный 
    центр сил, что обусловлено существованием циклического интеграла у второго 
    уравнения системы уравнений малых колебаний.

        <table border="0" width="100%" cellpadding="5">
   <tr>
    <td align=center>

        Тестовая надпись!
        

    </td>
    <th>Ячейка 2</th>
   </tr>
   <tr>
    <td>Ячейка 3
    <br>
        <p>Click me</p>
     <div class="menu">First</div>
        <br><br><br>
     <div class="menu">Second</div>
        <br><br><br>
     <div class="menu">Third</div>
        <br><br><br>

    </td>
    <td>Ячейка 4</td>
  </tr>


  </div>
 </body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Выравнивание по центру</title> <style type="text/css"> #centerLayer { position: absolute; /* Абсолютное позиционирование */ width: 800px; /* Ширина слоя в пикселах */ height: 500px; /* Высота слоя в пикселах */ left: 50%; /* Положение слоя от левого края */ top: 50%; /* Положение слоя от верхнего края */ margin-left: -400px; /* Отступ слева */ margin-top: -200px; /* Отступ сверху */ background: #fc0; /* Цвет фона */ border: solid 1px black; /* Параметры рамки вокруг */ padding: 10px; /* Поля вокруг текста */ overflow: auto; /* Добавление полосы прокрутки */ } #topLayer { position: absolute; /* Абсолютное позиционирование */ width: 300px; /* Ширина слоя в пикселах */ height: 50px; /* Высота слоя в пикселах */ left: 50%; /* Положение слоя от левого края */ top: 10%; /* Положение слоя от верхнего края */ margin-left: -400px; /* Отступ слева */ margin-top: -000px; /* Отступ сверху */ background: #ec0; /* Цвет фона */ border: solid 1px black; /* Параметры рамки вокруг */ padding: 10px; /* Поля вокруг текста */ overflow: auto; /* */ } div.menu { background:#ac3; margin:3px; width:80px; height:40px; display:none; float:left; } </style> <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(document).ready(function(){ $('#primer').click(function () { if ($(".menu:first").is(":hidden")) { $(".menu").slideDown("slow"); } else { $(".menu").hide(); } }); }); </script> </head> <body> <div id="topLayer"> <p>Menu</p> </div> <div id="centerLayer"> Будем также считать, что сила даёт большую проекцию на оси, чем газообразный центр сил, что обусловлено существованием циклического интеграла у второго уравнения системы уравнений малых колебаний. <table border="0" width="100%" cellpadding="5"> <tr> <td align=center> Тестовая надпись! </td> <th>Ячейка 2</th> </tr> <tr> <td>Ячейка 3 <br> <p id='primer'>Click me</p> <div class="menu">First</div> <br><br><br> <div class="menu">Second</div> <br><br><br> <div class="menu">Third</div> <br><br><br> </td> <td>Ячейка 4</td> </tr> </table> </div> </body> </html>