title: How do I get this ul li dropdown menu to show on hover with jquery or javascript?
body: <p>I have the following CSS:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle"&gt;Dropdown Appear 1&lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#contact"&gt;Somelink&lt;/a&gt;&lt;/li&gt;
      &lt;li class="dropdown"&gt;
          &lt;a href="#" class="dropdown-toggle"&gt;Dropdown Appear 2&lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
          &lt;li&gt;&lt;a href="#"&gt;Another Item 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Another Item 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Currently in CSS the dropdown-menu has a "display: none" property set. I want to make it so that without having to assign ID's to any of my DOM elements, a user can hover over or click "Dropdown Appear 1" or "Dropdown Appear 2" and show their respective dropdown menus. How do I accomplish this? (Would be nice if there was a slide down transition.)</p>