title: Menus with nested divs
body: <p>I need to make a mega menu/mashable like menu similar to one as show in image below
  <img src="https://i.stack.imgur.com/vES1v.png" alt="enter image description here"></p>
  
  <p>So far i have been able to make it work to some extent example on <a href="http://jsfiddle.net/4RFtc/" rel="nofollow noreferrer">jsFiddle HERE</a>.</p>
  
  <p>this has some design issue and one functionality issue.</p>
  
  <p>When i try to hide the default text for each dropdown menu <code>//$(this).find(".nav-info").hide();</code> then  Menu 4 &amp; 5 doesn't  show up on right side.</p>
  
  <p>I am actually trying to create a menu similar to one as on this <a href="http://www.hlgroup.com/en/section/capabilities" rel="nofollow noreferrer">website</a>.
  One this website they also show a default text for parent menu which i don't need actually. </p>
  
  <p>I modified script to show the first <code>li</code> of sub-menu it works find for Parent menu ONE, TWO but creates alignment problem for MENU FOUR and FIVE.</p>
  
  <p>I would appreciate if some can help me fix this issue...</p>
  
  <p>CODE</p>
  
  <pre><code>&lt;div class="container_16"&gt;
      &lt;div class="nav-main grid_16"&gt;
          &lt;div class="wrap-nav-media"&gt;
              &lt;ul id="nav-top-media"&gt;
                  &lt;!-- ONE --&gt;
                  &lt;li class="nav-item-1"&gt;&lt;a href="..company-overview"&gt;Parent Menu One&lt;/a&gt;
  
                      &lt;div style="display: none;" class="inner-nav-media"&gt;
                          &lt;ul&gt;
                              &lt;li class=""&gt;&lt;a class="current" href="../directors" rel="sub-1-relative-1"&gt;sub-1-relative-1&lt;/a&gt; 
                              &lt;/li&gt;
                              &lt;li class=""&gt;&lt;a class="current" href="../management-team" rel="sub-1-relative-2"&gt;sub-1-relative-2&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="last"&gt;&lt;a class="current" href="../tems.html" rel="sub-1-relative-3"&gt;sub-1-relative-3&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;div style="display: block;" class="menu-page first" id="mega-sub-1-relative-1"&gt;    &lt;a href="../board-of-directors" title="Board of Directors" rel="nofollow" class="thumb"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-1-relative-1&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="display: block;" class="menu-page" id="mega-sub-1-relative-2"&gt;  &lt;a href="../management-team" title="Management Team" rel="nofollow" class="thumb"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow; float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-1-relative-2&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="display: none;" class="menu-page" id="mega-sub-1-relative-3"&gt;   &lt;a href="../vision.html" title="Vision" rel="nofollow" class="thumb"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-1-relative-3&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;!-- TWO --&gt;
                  &lt;li class="nav-item-2"&gt; &lt;a href="..capabilities"&gt;Parent Menu TWO&lt;/a&gt;
  
                      &lt;div style="display: none;" class="inner-nav-media"&gt;
                          &lt;ul&gt;
                              &lt;li class=""&gt;&lt;a class="current" href="../infrastructure" rel="sub-2-relative-1"&gt;sub-2-relative-1&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class=""&gt;&lt;a class="current" href="..capabilities/building" rel="sub-2-relative-2"&gt;sub-2-relative-2&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="last"&gt;&lt;a class="current" href="..capabilities/rail" rel="sub-2-relative-3"&gt;sub-2-relative-3&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;div style="display: none;" class="menu-page first" id="mega-sub-2-relative-1"&gt; &lt;a href="../infrastructure" title="Infrastructure" rel="nofollow" class="thumb"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-2-relative-1&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="display: none;" class="menu-page" id="mega-sub-2-relative-2"&gt;   &lt;a href="../building" title="Building" rel="nofollow" class="thumb"&gt;
                                      &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                  &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-2-relative-2&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="display: none;" class="menu-page" id="mega-sub-2-relative-3"&gt;   &lt;a href="/rail" title="Rail" rel="nofollow" class="thumb"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-2-relative-3&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="nav-item-3"&gt;&lt;a href="../projects"&gt;THREE&lt;/a&gt; 
                  &lt;/li&gt;
                  &lt;li class="nav-item-4"&gt; &lt;a href="../-businesses"&gt;FOUR&lt;/a&gt;
  
                      &lt;div style="display: none;" class="inner-nav-media"&gt;
                          &lt;div style="display: block; float:right;" class="menu-page nav-info"&gt;   &lt;a class="thumb" rel="nofollow" title=" Businesses" href="../businesses"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;TEXT will be here...&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;ul&gt;
                              &lt;li class=""&gt;   &lt;a class="current" href="2.html" rel="sub-4-relative-1"&gt;sub-4-relative-1&lt;/a&gt;
  
                              &lt;/li&gt;
                              &lt;li class=""&gt;   &lt;a class="current" href="1.html" rel="sub-4-relative-2"&gt;sub-4-relative-2&lt;/a&gt;
  
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;div style="display: none;" class="menu-page first" id="mega-sub-4-relative-1"&gt; &lt;a href="../group.html" title="" rel="nofollow" class="thumb"&gt;
                                          &lt;img src="HLG-Mega-Menu_files/20110602_1-ARG.jpg" alt=""&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;TEXT will be here...&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="display: none;" class="menu-page" id="mega-sub-4-relative-2"&gt;   &lt;a href="../advance-water-and-environmentawe.html" title="Advance Water and Environment (AWE)" rel="nofollow" class="thumb"&gt;
                                          &lt;img src="HLG-Mega-Menu_files/20121024_AWG-220x165.jpg" alt="Advance Water and Environment (AWE)"&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;TEXT will be here...&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
                  &lt;li class="last nav-item-5"&gt;&lt;a href="../sustainability"&gt;FIVE&lt;/a&gt;
  
                      &lt;div style="display: none;" class="inner-nav-media"&gt;
                          &lt;div style="display: block;" class="menu-page nav-info"&gt;    &lt;a class="thumb" rel="nofollow" title="" href=""&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;This is Default text when i try to hide this then this menu moves to left&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;ul&gt;
                              &lt;li class=""&gt;&lt;a class="current" href="" rel="sub-5-relative-1"&gt;sub-5-relative-1&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class=""&gt;&lt;a class="current" href="" rel="sub-5-relative-2"&gt;sub-5-relative-2&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class=""&gt;&lt;a class="current" href="" rel="sub-5-relative-3"&gt;sub-5-relative-3&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="last"&gt;&lt;a class="current" href="" rel="sub-5-relative-4"&gt;sub-5-relative-4&lt;/a&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;div style="display: none;" class="menu-page first" id="mega-sub-5-relative-1"&gt; &lt;a href="/safety.html" title="" rel="nofollow" class="thumb"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-5-relative-3&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="display: none;" class="menu-page" id="mega-sub-5-relative-2"&gt;   &lt;a href="/environment.html" title="Environment" rel="nofollow" class="thumb"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-5-relative-2&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="display: none;" class="menu-page" id="mega-sub-5-relative-3"&gt;   &lt;a href="/community.html" title="Community" rel="nofollow" class="thumb"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-5-relative-3&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div style="display: none;" class="menu-page" id="mega-sub-5-relative-4"&gt;   &lt;a href="/quality.html" title="Quality" rel="nofollow" class="thumb"&gt;
                                          &lt;div style="height:80px width:80px; background-color:yellow;float:right;"&gt;IMAGE&lt;/div&gt;
                                      &lt;/a&gt;
  
                              &lt;div&gt;
                                  &lt;p&gt;Brief Contents will show up here sub-5-relative-4&lt;/p&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>