title: OnClick vertical navigation
body: <p>My site is going through a huge revamp. I want to add a lot more functionality to it but I think I've gotten in a bit too far over my head.</p>
  
  <p>The link that pertains to my question is: <a href="http://www.andrewryan.me/AndrewRyan/index.html" rel="nofollow">http://www.andrewryan.me/AndrewRyan/index.html</a></p>
  
  <p>I have one button on the left hand side of my top menu. I've made it nice and pretty and it's purely css. Whenever I use the menu it's extremely annoying to have to follow the path of uncertainty and risk closing out of the menu or submenus because I went off the target.</p>
  
  <p>I want the user to be able to click on that button and have the navigation menu open. From there, the user can have their mouse anywhere they'd like and it won't go away until they click outside the element or make their selection. There are also subsections that I want to have going off to the right. Those too would have to be clicked, but if you move your mouse off the submenu that's the only thing that would be gone. the main menu would remain. Here's the code I have thus far, I've tried multiple things but it just doesn't seem to work. I know little to nothing about jQuery or JavaScript.</p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div id="navigation"&gt;
                  &lt;ul id="nav"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Navigation&lt;/a&gt;
                          &lt;ul class="menu"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;Professional&lt;/a&gt;
                                  &lt;ul class="submenu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Ambitions&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Resume&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Portfolio  &gt;&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;About Myself&lt;/a&gt;
                                  &lt;ul class="submenu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;My Family&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Interests&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Scrap Book&lt;/a&gt;&lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;   
                              &lt;li&gt;&lt;a href="#"&gt;Social Life&lt;/a&gt;
                                  &lt;ul class="submenu"&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;Social Philosiphy&lt;/a&gt;&lt;/li&gt;
                                      &lt;li&gt;&lt;a href="#"&gt;My Networks  &gt;&lt;/a&gt;
                                          &lt;ul class="submenu"&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;Facebook&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;Google+&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;Personal Tumblr&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;YouTube&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;Twitter&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;Deviant Art&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;Sound Cloud&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;Github&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;Diaspora&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;MySpace&lt;/a&gt;&lt;/li&gt;
                                              &lt;li&gt;&lt;a href="#" target="_blank"&gt;about.me&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/div&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>#navigation {
      width:300px;
      height:40px;
      float:left;
      margin-top:-4px;
  }
  
  #navigation a {
      margin:0px auto;
      color:#ccc;
      outline:none;
      z-index:5; 
  }
  
   #nav {
      padding:7px 6px 10px 0px;
      background:none;
      line-height: 100%;
      display:inline-block;
     }
  
   #nav li {
      margin:0 0 0 5px;
      padding:0 0 0 0px;
      float:left;
      position:relative;
      list-style:none;
    }
  
   #nav a {
      border-radius:20px 25px 0 10px;
      border-top:solid 3px #fff;
      border-left:solid 3px #fff;
      font-weight:bold;
      color:#fff;
      background:none;
      text-decoration:none;
      display:block;
      padding:8px 20px;
  }
  
      /* hovers and current tabs */
  #nav a:hover {
      border-radius:10px;
      background:none;
      color:#ccc;
  }
  
    #nav .current a {
      border-radius:20px 25px 0 10px;
      background:none;
      color:#ccc;
      margin-bottom:0px;
      border-top:solid 3px #ccc;
      border-left:solid 3px #ccc;
  }
  
    #nav li:hover &gt; a {
      border-radius:20px 25px 0 10px;
      background:none;
      color: #ccc;
      margin-bottom:0px;
      border-top: solid 3px #ccc;
      border-left:solid 3px #ccc;
  }
  
   #nav ul li:hover a, #nav li:hover li a {
      background:none;
      border:none;
      color:#333;
      border-top:solid 1px #dfdfdf;
  }
  
   #nav ul a:hover { 
      color:black !important;
  }
  
   /* dropdown */
    #nav li:hover &gt; ul { 
      display:block; 
      background-color:#fff; 
      border-radius:10px 10px 10px 10px;
  }
  
  /* level 2 list */
    #nav ul {
      display:none;
      margin: 0;
      padding:0;
      width:150px;
      position:absolute;
      top:33px;
      left:0;
      background:#aaa;
      border:solid 1px #b4b4b4;
  }
  
    #nav ul:hover { 
      background-color:#ddd;
  }
  
    #nav ul li {
      z-index:5;
      font-weight:bold;
      float:none;
      margin:0px;
      padding:0px;
  }
  
   #nav ul a { 
      font-weight:normal;
  }
  </code></pre>