title: building a jquery menu
body: <p>I have built a jquery menu.</p>
  
  <p>However it's not very elegant and rather clunky. For example, When you click 'menu' , it snaps open and snaps closed very quickly.</p>
  
  <p>Also, if you open the menu and hover over a link,  clicking to the left or right of the link will cause the menu will snap shut again</p>
  
  <p>please may someone help me make this a little more elegant?  I have tried using  a slide effect, but when the user hovers over the menu, it creates a bouncing effect (The menu opens and closes continuously )</p>
  
  <p>HERE is my code: <a href="http://jsfiddle.net/s94xhnw6/" rel="nofollow noreferrer">fiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function() {
    $('.menu').click(function() {
      $('.submenu').fadeToggle('1000');
    });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.menu {
    width: 300px;
    margin: 20px auto 0 300px;
    vertical-align: top;
    padding: 0;
    font-size: 18px;
    color: white;
    text-align: center;
    background: #34495E;
    border: 0px;
    border-bottom: 2px solid #2C3E50;
    -webkit-box-shadow: inset 0 -2px #34495E;
    box-shadow: inset 0 -2px #34495E;
    clear: both;
    margin-left: 66px;
  }
  
  .submenu {
    width: 300px;
    background-color: #6D767F;
    padding: 0px;
    margin: 0 auto;
    text-align: center;
    font-size: 15px;
    color: #FFF;
    display: none;
  }
  
  ul li {
    list-style: none;
    padding: 11px;
    margin: 0px;
    text-transform: lowercase;
    font-weight: 700;
  }
  
  ul li a {
    text-decoration: none;
    font-size: 1.1em;
    color: #FFF;
  }
  
  ul li a:visited {
    text-decoration: none;
  }
  
  .submenu ul li:hover {
    background-color: #719ECC;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="menu"&gt;
    &lt;!-- START HEADER --&gt;
    &lt;ul&gt;
      &lt;li&gt;menu&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div class="submenu"&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Mountain Bike&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;gopro&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Shoei Helmet&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>