title: Dropdown menu (with images and UL LI list)
body: <p>I have a drop down menu (I fixed the position) and <code>display: none;</code> than I just change the display to block. and I have this:</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$('.dropdownmenu').hover(function () {
          console.log("hovered");
      },
      function () {
          console.log("out");
      }
  );
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="dropdownmenu" style="display: none;"&gt;
      &lt;div id="dropdownmenuheader"&gt;
          &lt;ul class="dropdownmenulist"&gt;
              &lt;li&gt;
                  &lt;div class="dbordermenulist"&gt;&lt;a href="/blah"&gt;Web design &amp; development&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="dbordermenulist"&gt;&lt;a href="/blah"&gt;Web hosting&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="dbordermenulist"&gt;&lt;a href="/blah"&gt;Branding&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;div class="dbordermenulist"&gt;&lt;a href="/blah"&gt;Digital Marketing&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
              &lt;li style="border-bottom: 0;"&gt;
                  &lt;div class="dbordermenulist" style="border-bottom: 0;"&gt;&lt;a href="/blah"&gt;Software Development&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
      &lt;div id="dropdowngradient"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But mouseenter, mouseleave or hover don't seem to work, I'm trying to create an effect when somebody hovers over it it stays visible but when mouse leaves for 2secs it fades away. (I know that I need to use timers, but I  cant get <code>.hover</code> triggered).</p>