title: show,hide DIV with mouseover , mouseout
body: <p>i want to create a simple dropdown menu with div but i have this problem:
  when goes over my button div show pretty good but when mouse goes out from my link field (in this case show/hide text) my div goes to hide . how can i change my hide area button ?
  because in my files i cant select links in dropdown div.</p>
  
  <p>HTML code:</p>
  
  <pre><code>&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Papermashup.com | Sliding Div&lt;/title&gt;
  &lt;script src="jquery.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="dropdown/drop.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;link type="text/css" href="dropdown/drop.css" rel="stylesheet"/&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
   &lt;a href="#" class="show_hide"&gt;Show/hide&lt;/a&gt;&lt;br /&gt;
      &lt;div class="slidingDiv" style="width:103px;height:60px;"&gt;
          &lt;img alt="" height="80" src="images/dropdown.png" width="103"&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS code:</p>
  
  <pre><code>.show_hide {
      display:none;
  }
  </code></pre>
  
  <p>JavaScript code:</p>
  
  <pre><code>$(document).ready(function(){
  
  
      $(".slidingDiv").hide();
      $(".show_hide").show();
  
  $('.show_hide').mouseover(function(){
      $(".slidingDiv").slideToggle();
  });
  $('.show_hide').mouseout(function(){
      $(".slidingDiv").slideToggle();
  });
  
  });
  </code></pre>