title: How to get dropdown menu to open/close on click rather than hover?
body: <p>I am very new to javascript and ajax/jquery and have been working on trying to get a script to open and close the drop menu on click rather that hover.</p>
  
  <p>The menu in question is found on <a href="http://www.gamefriction.com/Coded/" rel="noreferrer">http://www.gamefriction.com/Coded/</a> and is the dark menu on the right side under the header. I would like it to open and close like the other menu that is further below it (it is light gray and is in the "Select Division" module).</p>
  
  <p>The gray menu is part of a  menu and the language menu is not.</p>
  
  <p>I have a jquery import as well which can be found in the view source of the above link.</p>
  
  <p><strong>My Javascript Code:</strong></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
   /* Language Selector */
  
   $(function() {
       $("#lang-selector li").hover(function() {
           $('ul:first',this).css('display', 'block');
       }, function() {
           $('ul:first',this).css('display', 'none');
       });
   });
  
   $(document).ready(function(){ 
  
    /* Navigation */
    $('.subnav-game').hide();
    $('.subnav-game:eq(0)').show();
    $('.preorder-type').hide();
  
  
    $('.preorder-type:eq(3)').show();
  
  
   });
  
  
   &lt;/script&gt;
  </code></pre>
  
  <p><strong>My CSS:</strong> </p>
  
  <pre><code>#lang-selector 
    {
    font-size: 11px;
    height: 21px;
    margin: 7px auto 17px auto;
    width: 186px;
    }
  
   #lang-selector span 
    {
    color: #999;
    float: left;
    margin: 4px 0 0 87px;
    padding-right: 4px;
    text-align: right;
    }
  
   #lang-selector ul 
    {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
    }
  
   #lang-selector ul li a 
    {
    padding: 3px 10px 1px 10px;
    }
  
   #lang-selector ul, #lang-selector a 
    {
    width: 186px;
    }
  
   #lang-selector ul ul 
    {
    display: none;
    position: absolute;
    }
  
   #lang-selector ul ul li
    {
    border-top: 1px solid #666;
    float: left;
    position: relative;
    }
  
   #lang-selector a 
    {
    background: url("http://www.gamefriction.com/Coded/images/language_bg.png") no-repeat;
    color: #666;
    display: block;
    font-size: 10px;
    height: 17px;
    padding: 4px 10px 0 10px;
    text-align: left;
    text-decoration: none;
    width: 166px;
    }
  
   #lang-selector ul ul li a 
    {
    background: #333;
    color: #999;
    }
  
   #lang-selector ul ul li a:hover 
    {
    background: #c4262c;
    color: #fff;
    }
  </code></pre>
  
  <p><strong>My HTML:</strong></p>
  
  <pre><code>&lt;div id="lang-selector"&gt;
        &lt;ul&gt;
         &lt;li&gt;
          &lt;a href="#"&gt;Choose a Language&lt;/a&gt;
          &lt;ul&gt;
           &lt;li&gt;&lt;a href="?iw_lang=en"&gt;English&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="?iw_lang=de"&gt;Deutsch&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="?iw_lang=es"&gt;Espa&amp;ntilde;ol&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="?iw_lang=fr"&gt;Fran&amp;ccedil;ais&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="?iw_lang=it"&gt;Italiano&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
         &lt;/li&gt;
        &lt;/ul&gt; 
       &lt;/div&gt;
  </code></pre>
  
  <p>Thanks!</p>