title: Submenu dropdown layout in Bootstrap
body: <p>I'm new to using Bootstrap and JS isn't my strongest language so I'm struggling to achieve what I'm looking for.</p>
  
  <p>I have a menu for a site being generated with php like so:</p>
  
  <pre><code>&lt;?php
  $products_menu = '';
  $sql1 = "SELECT * FROM headings";
  $stmt1 = DB::run($sql1);
  while($row = $stmt1-&gt;fetch(PDO::FETCH_ASSOC)){
      $heading_id = $row['id'];
      $heading = $row['heading'];
  
      $products_menu .= '&lt;li class="dropdown-item d-block"&gt;';
      $products_menu .= '&lt;a class="submenu-item" href="store#'.$heading_id.'"&gt;'.$heading.'&lt;/a&gt;';
      $products_menu .= '&lt;ul class="dropdown-submenu"&gt;';
  
      $params = [$heading_id];
      $sql = "SELECT categories.category,categories.url FROM categories INNER JOIN category_headings on categories.id=category_headings.category WHERE category_headings.heading=?";
      $stmt = DB::run($sql,$params);
      while($row = $stmt-&gt;fetch(PDO::FETCH_ASSOC)){
          $category = $row['category'];
          $url = $row['url'];
  
          $products_menu .= '&lt;li class="d-block"&gt;&lt;a href="category/'.$url.'"&gt;'.$category.'&lt;/a&gt;&lt;/li&gt;';
      }
      $products_menu .= '&lt;/ul&gt;';
      $products_menu .= '&lt;/li&gt;';
  }
  ?&gt;
  
  &lt;nav class="navbar navbar-expand-lg"&gt;
      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
          &lt;img src="media/icons/menu.png" alt="Lifting365 Menu" class="icon"&gt;
      &lt;/button&gt;
      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
          &lt;ul class="navbar-nav mr-auto"&gt;
              &lt;li class="nav-item text-center"&gt;&lt;a class="nav-link nav" href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item text-center dropdown"&gt;
                  &lt;a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"&gt;Products&lt;/a&gt;
                  &lt;ul class="dropdown-menu"&gt;
                      &lt;?php echo $products_menu; ?&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
              &lt;li class="nav-item text-center"&gt;&lt;a class="nav-link nav" href="blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item text-center"&gt;&lt;a class="nav-link nav" href="about"&gt;About&lt;/a&gt;&lt;/li&gt;
              &lt;li class="nav-item text-center"&gt;&lt;a class="nav-link nav" href="contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/9jpLp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9jpLp.png" alt="enter image description here"></a></p>
  
  <p>I want the first dropdown menu to be positioned outside of the parent header. </p>
  
  <p>Then each item in the first dropdown should also be clickable to bring you to that heading on the store page.</p>
  
  <p>Hovering on the first dropdown menu items should show its submenu to the side.</p>
  
  <h2>Edit</h2>
  
  <p>I didn't want to post the whole HTML being generated as its huge so I cut out an example of the first few headings and just the first few categories from each one</p>
  
  <pre><code>&lt;div class="page-header header-bottom"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;
  
              &lt;div class="col-lg-4 col-md-5 col-sm-5 col-xs-5"&gt;
                  &lt;a href="/"&gt;&lt;img src="media/logo.png" alt="Logo" class="logo"&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class="col-lg-4 col-md-5 col-sm-5 col-xs-5"&gt;
                  &lt;form class="form-inline search"&gt;
                      &lt;div class="input-group"&gt;
                          &lt;input class="form-control" type="text" placeholder="Search" aria-label="Search"&gt;
                              &lt;div class="input-group-append"&gt;
                              &lt;button class="btn btn-default bg-orange" type="submit"&gt;
                              &lt;img src="media/icons/search.png" alt="search icon" class="icon"&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/form&gt;         
              &lt;/div&gt;
  
              &lt;div class="col-lg-4 col-md-2 col-sm-2 col-xs-2"&gt;
  
                  &lt;nav class="navbar navbar-expand-lg"&gt;
                      &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
                          &lt;img src="media/icons/menu.png" alt="Menu" class="icon"&gt;
                      &lt;/button&gt;
                      &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
                          &lt;ul class="navbar-nav mr-auto"&gt;
                              &lt;li class="nav-item text-center"&gt;&lt;a class="nav-link nav" href=""&gt;Home&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item text-center dropdown"&gt;
                                  &lt;a class="nav-link nav dropdown-toggle" href="#" data-toggle="dropdown" aria-expanded="false"&gt;Products&lt;/a&gt;
                                  &lt;ul class="dropdown-menu"&gt;
                                      &lt;li class="dropdown-item d-block"&gt;
                                          &lt;a class="submenu-item" href="store#1"&gt;Lifters &amp;amp; Accessories&lt;/a&gt;
                                          &lt;ul class="dropdown-submenu"&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Hooks-Weld-On-Hooks"&gt;Hooks - Weld On Hooks&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Manhole-Cover-Lifters"&gt;Manhole Cover Lifters&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Salt-Spreaders"&gt;Salt Spreaders&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/ID-Tags"&gt;ID Tags&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li class="dropdown-item d-block"&gt;
                                          &lt;a class="submenu-item" href="store#2"&gt;Lifting &amp;amp; Measurement Attachments&lt;/a&gt;
                                          &lt;ul class="dropdown-submenu"&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Big-Bag-Lifters"&gt;Big Bag Lifters&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Crane-Slung-Safety-Cages"&gt;Crane Slung Safety Cages&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Gas-Bottle-Handlers"&gt;Gas Bottle Handlers&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Weighers-Crane-Weighers"&gt;Weighers - Crane Weighers&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li class="dropdown-item d-block"&gt;
                                          &lt;a class="submenu-item" href="store#3"&gt;Forklift &amp;amp; Crane Attachments&lt;/a&gt;
                                          &lt;ul class="dropdown-submenu"&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Forklift-Magnetic-Sweepers"&gt;Forklift Magnetic Sweepers&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Wheelie-Bin-Tippers"&gt;Wheelie Bin Tippers&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Forklift-Safety-Cages"&gt;Forklift Safety Cages&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Fork-Extensions"&gt;Fork Extensions&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Forklift-Base-Emptying-Stillages"&gt;Forklift Base Emptying Stillages&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                      &lt;li class="dropdown-item d-block"&gt;
                                          &lt;a class="submenu-item" href="store#4"&gt;Forklift Hooks &amp;amp; Jibs&lt;/a&gt;
                                          &lt;ul class="dropdown-submenu"&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Forklift-Mounted-Hook-Fixed"&gt;Forklift Mounted Hook - Fixed&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Forklift-Mounted-Hook-Adjustable"&gt;Forklift Mounted Hook - Adjustable&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Crane-Spreader-Beams"&gt;Crane Spreader Beams&lt;/a&gt;&lt;/li&gt;
                                              &lt;li class="d-block"&gt;&lt;a href="category/Forklift-Jibs"&gt;Forklift Jibs&lt;/a&gt;&lt;/li&gt;
                                          &lt;/ul&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/li&gt;
                              &lt;li class="nav-item text-center"&gt;&lt;a class="nav-link nav" href="blog"&gt;Blog&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item text-center"&gt;&lt;a class="nav-link nav" href="page/About"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                              &lt;li class="nav-item text-center"&gt;&lt;a class="nav-link nav" href="contact"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/nav&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>