Создание раскрывающегося списка с использованием эффекта Scriptaculous и prototype BlindDown или SlideDown

Я пытаюсь создать раскрывающийся список javascript, используя scriptaculous и prototype. Я знаю, что это можно сделать с помощью псевдоселекторов CSS: hover, но я хотел бы добавить к этому немного дополнительного чутья. Проблема в том, что, хотя я могу заставить работать эффект выпадающего / раскрывающегося списка, он кажется очень нестабильным. Есть простой способ сделать это, или я должен придерживаться зависаний? Вот CSS, который я использую.

<style type = "text/css">
ul {list-style-type: none}

#navbar>li {
 position: relative;
 float: left;
 padding-right: 20px;
 height: 2em;
 background-color: #002;
}

ul.dropdown {
 display: block;
 position: absolute;
 top: 2em;
 left: 0px;
 background-color: #00c;
}
</style>

И вот html (я добавил style = "display: none" для документа, в котором говорилось, что нужно поместить его туда, а не в таблицу стилей, если вы хотите, чтобы цель изначально была скрыта).

<ul id = "navbar">
  <li
    onmouseover = "Effect.BlindDown('dropdownone', { duration: 0.8 })"
    onmouseover = "Effect.BlindUp('dropdownone', { duration: 0.8 })"><a href = "">Menu Link 1</a>
    <ul id = "dropdownone" class = "dropdown" style = "display: none">
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
      <li>Drop Down Link 3</li>
    </ul>
  </li>
  <li><a href = "">Menu Link 2</a>
    <ul id = "dropdowntwo" class = "dropdown">
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
      <li>Drop Down Link 3</li>
      <li>Drop Down Link 4</li>
      <li>Drop Down Link 5</li>
    </ul>
  </li>
  <li><a href = "">Menu Link 3</a>
    <ul id = "dropdownthree" class = "dropdown">
      <li>Drop Down Link 1</li>
      <li>Drop Down Link 2</li>
    </ul>
  </li>
</ul>