title: Making dropdown menu stay after clicking
body: <p>I'm currently trying to make my menu stay when you click on the menu, i mean so that the dropdown menu stays after clicking on it. 
  That is code i've already tried(Javascript down below), but for some reason it wont work for me in reality. So I'm looking for help now.</p>
  
  <p>Fiddle with style > <a href="http://jsfiddle.net/hRxRG/" rel="nofollow">http://jsfiddle.net/hRxRG/</a></p>
  
  <pre><code>&lt;!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"xml:lang="sv"&gt;
  &lt;head&gt;
    &lt;title&gt;Nösnäs&lt;/title&gt;
  
          &lt;link rel="stylesheet" type="text/css" href="screen.css" /&gt;
  &lt;script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'&gt;&lt;/script&gt;
          &lt;script src="script.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;button class="nav-button"&gt;Toggle Navigation&lt;/button&gt;
  
  &lt;ul class="nav"&gt;
  &lt;li class="program"&gt;&lt;a href="#"&gt;Program&lt;/a&gt;
  &lt;div class="second nav"&gt;
    &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Teknik&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Naturvetenskap&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;El&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/li&gt;
  &lt;/div&gt;
    &lt;li&gt;&lt;a href="#"&gt;Nösnäs&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Schema&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Matsal&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  
  
  
  
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  
  
  
  
  
  console.log("hej");
  
  $(".program").on('click',function () {
  console.log("hejssss");
                  $('li div ul').toggle('.close');
                  console.log("hejs");
                  $('li div ul').show();
  
          });
  </code></pre>