title: Drop Down Div Stay Visible on Hover jQuery
body: <p>I have a drop down div (.drop-down) that has a display none but slides down on another div (.nav-divs) hover. I want to be able to have .drop-down stay visible when I hover over it but currently it flickers terribly on hover. Im sure there is a really simple solution but I am fairly new to jQuery. Help would be greatly appreciated.</p>
  
  <p>Here is a <a href="http://jsfiddle.net/q73uum0h/" rel="nofollow">fiddle</a></p>
  
  <p>Thanks!</p>
  
  <p>HTML - </p>
  
  <pre><code>&lt;div id='container'&gt;
  &lt;a href=''&gt;&lt;div class='nav-divs'&gt;Home
  
  &lt;/div&gt;&lt;/a&gt;
  &lt;a href=''&gt;&lt;div class='nav-divs'&gt;Products
  &lt;div class='drop-down'&gt;&lt;ul class="product-list"&gt;
      &lt;a href=""&gt;&lt;li&gt;Phones&lt;/li&gt;&lt;/a&gt;
      &lt;a href=""&gt;&lt;li&gt;Computers&lt;/li&gt;&lt;/a&gt;
      &lt;a href=""&gt;&lt;li&gt;Software&lt;/li&gt;&lt;/a&gt;
      &lt;a href=""&gt;&lt;li&gt;Hardware&lt;/li&gt;&lt;/a&gt;
  &lt;/ul&gt;&lt;/div&gt;
  &lt;/div&gt;&lt;/a&gt;
  &lt;a href=''&gt;&lt;div class='nav-divs'&gt;About
  
  &lt;/div&gt;&lt;/a&gt;
  &lt;a href=''&gt;&lt;div class='nav-divs'&gt;Contact
  
  &lt;/div&gt;&lt;/a&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS -</p>
  
  <pre><code>#container {
          text-align: center;
          height: 30px;
          width: 100%;
          background-color: #2B2B2B;
          position: fixed;
  
      }
  
      .nav-divs {
          background-color: #2B2B2B;
          height: 30px;
          width: 100px;
          display: inline-block;
          margin-left: 50px;
          line-height: 30px;
          font-family: Franklin Gothic Medium Cond, Futura BdCn BT, helvitica, arial, sans-serif;
              color: white;
              vertical-align:top;
  
  
      }
  
      .drop-down {
          height: 150px;
          width: 100px;
          background-color: #474747;
          display: none;
          position: absolute;
          text-align: center;
  
      }   
  
      .drop-down ul li {
          list-style-type: none;
  </code></pre>
  
  <p>jQuery - </p>
  
  <pre><code>$('.nav-divs').mouseover(function(){
  $(this).find('.drop-down').slideDown(300);
  
  });
  
  $('.nav-divs').mouseout(function(){
  $(this).find('.drop-down').slideUp(100);
  
  });
  </code></pre>
  
  <p>Thanks Again!</p>