title: Set the drop down-menu background height to absolute position sub menu height
body: <p>I have a multi level navigation on the page. The navigation has three to four levels. I want a full width background in the drop down menu including all the sub menus. Currently, I have done with the one level, but when on click of the first level menu, the second level menu arises then the background is not taking the height dynamically and same in the case of the third level menu. As the sub menus are in absolute position, the height of the background is not increasing dynamically. Can anyone help? I have one reference website.
  <a href="http://www.qsc.com/" rel="nofollow">http://www.qsc.com/</a>... but from here i am unable to get the code. I am preparing my own code.</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> $(document).ready(function(){
   /* 
          // Show hide popover
          $(".dropdown").click(function(){
              $(this).find(".dropdown-menu").slideToggle("fast");
     
          });*/
    $('.dropdown-menu').hide(); 
    
    $('.nav ul li &gt; a').click(function() {
   $(this).parent().siblings().find('ul').slideUp(300);
   $(this).next('ul').stop(true, false, true).slideToggle(300);
   return false;
   
    });
   
   
  });
   
   </code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* not very relevant styling */
  h1         { font-size: 20px; padding-top: 20px; }
  .container { position: relative; margin: 20px auto 0 auto; width: 75%; }
  .header    { background: #eee; }
  .nav       { background: #ccc; }
  
  
  /* relevant styling */
  
  body { overflow-x: hidden; } /* trick from css-tricks comments */
  
  /* FIRST LEVEL */
  
  .nav &gt; ul &gt; li { 
      display: inline-block; 
      position: relative; 
      padding: 3px 10px 3px 0;
      z-index: 100;
   list-style:none;
  }
  
  .nav &gt; ul &gt; li &gt; ul{
   width:100px}
  
  .nav &gt; ul &gt; li &gt; a{
   color:#939598;
   text-decoration:none;
  }
  
  /* Level 1 Drop Down */
  .dropdown-menu &gt; li {
   display: inline-block;
   vertical-align: top;
    /* solve the 4 pixels spacing between list-items */
  }
  .dropdown-menu &gt; li:first-child {
   margin-left: 0;
  }
  
  .dropdown-menu li {
   position: relative;
   list-style:none;
  }
  
  /* SECOND LEVEL ( background -color) of full width bg*/
  .nav &gt; ul &gt; li &gt; ul {
      position: absolute;
      left: 0;
      top: 100%;
      padding: 0 1000em; /* trick from css-tricks comments */
      margin: 0 -1000em; /* trick from css-tricks comments */
      z-index: 101;   
      background:#f2f2f2;
  }
  
  
  
  
  
  /*second level menu*/
  .nav li ul li ul li:before {
      content: "";
      display: block;
      width: 1px;
      height: 100%;
      background-color: #7f7f7f;
      position: absolute;
      left: 0;
  }
  
  
  .nav &gt; ul &gt; li &gt; ul &gt; li {
      padding: 3px 0;
   color:#939598;
   text-decoration:none;
  
  
  }
  
  .nav &gt; ul &gt; li &gt; ul &gt; li &gt; a{color:#939598;
   text-decoration:none;}
   
   .dropdown-menu li a{
   color:#939598;
   text-decoration:none;  
  }
  
   .dropdown-menu li ul li{
    color:#939598;
   text-decoration:none;
    padding-left:5px;}
   
   
   
  .dropdown-menu  &gt; li &gt; ul {
   text-align: left;
   display: none;
   color:#939598;
   text-decoration:none;
   position: absolute;
   top: 5px;
   left: 100%; 
   z-index: 999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
  }
  
  
  .nav .drop { 
   
      width:100%!important; /* or: width:1200px!important;*/
      box-sizing:border-box;
  }
  
  /*Third level menu*/
  
  .dropdown-menu  &gt; li &gt; ul &gt; li &gt; ul {
   text-align: left;
  display: none; 
   position: absolute;
   left: 100%;
   top: 0;
   z-index: 9999999;
   color:#939598;
   text-decoration:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="header"&gt;
      &lt;!-- NAVIGATION --&gt;    
      &lt;div class="nav"&gt;
          &lt;ul class="container"&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a class="drop" href="#"&gt;Products&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Live Sound&lt;/a&gt;
                      
                      &lt;ul&gt;
                      &lt;li&gt;Power AMplifiers&lt;/li&gt;
                      &lt;li&gt;Loud Speakers&lt;/li&gt;
                       &lt;li&gt;Power AMplifiers&lt;/li&gt;
                      &lt;li&gt;Loud Speakers&lt;/li&gt;
                       &lt;li&gt;Power AMplifiers&lt;/li&gt;
                      &lt;li&gt;Loud Speakers&lt;/li&gt;
                       &lt;li&gt;Power AMplifiers&lt;/li&gt;
                      &lt;li&gt;Loud Speakers&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Touch Mix Mixers&lt;/a&gt;
                      &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;GX Series&lt;/li&gt;
                      &lt;li&gt;GXD Series&lt;/li&gt;
                      &lt;li&gt;RMX Series&lt;/li&gt;
                      &lt;li&gt;PLX2 Series&lt;/li&gt;
                      &lt;li&gt;Powerlight three Series&lt;/li&gt;
                      &lt;/ul&gt;
                      
                      &lt;/li&gt;
                      
                      &lt;/ul&gt;
                      
                      &lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;System&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Cinema&lt;/a&gt;&lt;/li&gt;
                     
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="dropdown"&gt;
                  &lt;a class="drop" href="#"&gt;Locations&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Location A&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Location B&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Location C&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              
              
              &lt;li class="dropdown"&gt;
                  &lt;a class="drop" href="#"&gt;Locations&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Location A&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Location B&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#"&gt;Location C&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          
          &lt;/ul&gt;
      &lt;/div&gt;
      
  &lt;/div&gt;
  
  &lt;div class="content container"&gt;
      &lt;p&gt;All sorts of content&lt;/p&gt;
      &lt;p&gt;All sorts of content&lt;/p&gt;
      &lt;p&gt;All sorts of content&lt;/p&gt;
      &lt;p&gt;All sorts of content&lt;/p&gt;
      &lt;p&gt;All sorts of content&lt;/p&gt;
      &lt;p&gt;All sorts of content&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>