title: Making a drop-down list using scriptaculous and prototype's BlindDown or SlideDown effect
body: <p>I'm trying to make a javascript dropdown list using scriptaculous and prototype. I know this can be done using CSS :hover pseudo-selectors, but I would like to add some additional flair to it. The problem is that while I can kind of get the dropdown/up effect working, it seems very flaky. Is there a simple way to do this, or should I stick to the hovers? Here is the CSS I'm using.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  ul {list-style-type: none}
  
  #navbar&gt;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;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>And here is the html (I added the style="display: none" per the documentatoin, which said to put it there instead of in a stylesheet if you want the target to initially be hidden).</p>
  
  <pre><code>&lt;ul id="navbar"&gt;
    &lt;li
      onmouseover="Effect.BlindDown('dropdownone', { duration: 0.8 })"
      onmouseover="Effect.BlindUp('dropdownone', { duration: 0.8 })"&gt;&lt;a href=""&gt;Menu Link 1&lt;/a&gt;
      &lt;ul id="dropdownone" class="dropdown" style="display: none"&gt;
        &lt;li&gt;Drop Down Link 1&lt;/li&gt;
        &lt;li&gt;Drop Down Link 2&lt;/li&gt;
        &lt;li&gt;Drop Down Link 3&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Menu Link 2&lt;/a&gt;
      &lt;ul id="dropdowntwo" class="dropdown"&gt;
        &lt;li&gt;Drop Down Link 1&lt;/li&gt;
        &lt;li&gt;Drop Down Link 2&lt;/li&gt;
        &lt;li&gt;Drop Down Link 3&lt;/li&gt;
        &lt;li&gt;Drop Down Link 4&lt;/li&gt;
        &lt;li&gt;Drop Down Link 5&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href=""&gt;Menu Link 3&lt;/a&gt;
      &lt;ul id="dropdownthree" class="dropdown"&gt;
        &lt;li&gt;Drop Down Link 1&lt;/li&gt;
        &lt;li&gt;Drop Down Link 2&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>