title: menu dropdown with extended list
body: <p>I want to create smooth dropdown menu. The idea is: when clicking on orange element it will toggle black elements, and when clicking on black element it will toggle grey elements. But what i got is black element covering orange element with grey elements already toggled. I've used <code>display:none;</code> everywhere to make sure that it won't show up and.. Everything is toggled after clicking orange element. Using <code>.hide()</code> also doesn't want to help hide this elements. How can i make this black box (after <code>click</code> event) toggle below orange element and don't show grey? Also i don't know how to make grey element to not hide when someone will click on it. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>  $(".d").click(function(){
          $(".d ul li").slideToggle(200);
      });
  
  $(".a").click(function(){
          $(".b").slideToggle(200);
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#container
  {
      width: 200px;
      height: 500px;
      background-color: rgba(0, 0, 0, 0.3);
      overflow-y: scroll;
      overflow-x: hidden;
  }
  
  ul
  {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  
  .a, .c
  {
      position: relative;
      display: none;
      width: 200px;
      height: 100px;
      margin-bottom: 10px;
      background-color: black;
      cursor: pointer;
  }
  
  .b
  {
      position: relative;
      display: none;
      margin-bottom: 5px;
      padding: 0;
      height: 100px;
      width: 200px;
      background-color: rgba(0, 0, 0, 0.6);
  }
  
  .d, .e
  {
      font-size: 20px;
      position: relative;
      width: 200px;
      height: 100px;
      margin-bottom: 10px;
      background-color: orange;
      cursor: pointer;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="container"&gt;
      &lt;ul&gt;
          &lt;li class="d"&gt;1
              &lt;ul&gt;
                  &lt;li class="a"&gt;&lt;/li&gt;
                      &lt;ul&gt;
                          &lt;li class="b"&gt;&lt;/li&gt;
                          &lt;li class="b"&gt;&lt;/li&gt;
                          &lt;li class="b"&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;li class="c"&gt;&lt;/li&gt;
                  &lt;li class="c"&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li class="d"&gt;2&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>