title: Bootstrap mega menu take style from chrome dev mode
body: <p>I'm trying to add a mega menu to my website. I found one that is working and that I like. But I have a problem with the styling I can't seem to solve.</p>
  <p>Here is how the dropdown menu looks like:</p>
  <p><a href="https://i.stack.imgur.com/uvVtY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uvVtY.png" alt="enter image description here" /></a></p>
  <p>Not the checkbox in Chrome Dev mode: <code>.dropdown, .dropup { position: relative; }</code>
  Now, when I untick this checkbox, I get the result I want, namely this:</p>
  <p><a href="https://i.stack.imgur.com/uOTmZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uOTmZ.png" alt="enter image description here" /></a></p>
  <p>Now my question is, how can I include this in my css code for it to be displayed the way I want it to be?</p>
  <p>Here is the code for my menu:</p>
  <pre><code>    &lt;div class=&quot;container&quot;&gt;
   &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-12&quot;&gt;
     &lt;nav class=&quot;navbar navbar-expand-lg navbar-light bg-light rounded&quot;&gt;
      &lt;a class=&quot;navbar-brand&quot; href=&quot;#&quot;&gt;Bootstrap 4 Mega Menu&lt;/a&gt;
      &lt;button class=&quot;navbar-toggler&quot; type=&quot;button&quot; data-toggle=&quot;collapse&quot; data-target=&quot;#navbar&quot; aria-controls=&quot;navbars&quot; aria-expanded=&quot;false&quot; aria-label=&quot;Toggle navigation&quot;&gt;
                      &lt;span class=&quot;navbar-toggler-icon&quot;&gt;&lt;/span&gt;
            &lt;/button&gt;
      &lt;div class=&quot;collapse navbar-collapse&quot; id=&quot;navbar&quot;&gt;
       &lt;ul class=&quot;navbar-nav mr-auto&quot;&gt;
        &lt;li class=&quot;nav-item dropdown megamenu-li&quot;&gt;
         &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;&quot; id=&quot;dropdown01&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Mega Menu 1&lt;/a&gt;
         &lt;div class=&quot;dropdown-menu megamenu&quot; aria-labelledby=&quot;dropdown01&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
           &lt;div class=&quot;col-sm-6 col-lg-3&quot;&gt;
            &lt;h5&gt;Links&lt;/h5&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
           &lt;/div&gt;
           &lt;div class=&quot;col-sm-6 col-lg-3&quot;&gt;
            &lt;h5&gt;More Links&lt;/h5&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
           &lt;/div&gt;
           &lt;div class=&quot;col-sm-6 col-lg-3&quot;&gt;
            &lt;h5&gt;Paragraph&lt;/h5&gt;
            &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus in veritatis, facilis eligendi sunt, culpa autem harum porro earum.&lt;/p&gt;
           &lt;/div&gt;
           &lt;div class=&quot;col-sm-6 col-lg-3&quot;&gt;
            &lt;h5&gt;Image&lt;/h5&gt;
            &lt;img src=&quot;https://source.unsplash.com/250x150/?sig=4&quot; alt=&quot;...&quot; style=&quot;width: 100%;&quot;&gt;
           &lt;/div&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/li&gt;
        &lt;li class=&quot;nav-item dropdown megamenu-li&quot;&gt;
         &lt;a class=&quot;nav-link dropdown-toggle&quot; href=&quot;&quot; id=&quot;dropdown02&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;Mega Menu 2&lt;/a&gt;
         &lt;div class=&quot;dropdown-menu megamenu&quot; aria-labelledby=&quot;dropdown02&quot;&gt;
          &lt;div class=&quot;row&quot;&gt;
           &lt;div class=&quot;col-sm-6 col-lg-4&quot;&gt;
            &lt;h5&gt;Image Slider&lt;/h5&gt;
            &lt;div id=&quot;carouselExampleControls&quot; class=&quot;carousel slide&quot; data-ride=&quot;carousel&quot;&gt;
             &lt;div class=&quot;carousel-inner&quot;&gt;
              &lt;div class=&quot;carousel-item active&quot;&gt;
               &lt;img class=&quot;d-block w-100&quot; src=&quot;https://source.unsplash.com/250x150/?sig=1&quot; alt=&quot;...&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;carousel-item&quot;&gt;
               &lt;img class=&quot;d-block w-100&quot; src=&quot;https://source.unsplash.com/250x150/?sig=2&quot; alt=&quot;...&quot;&gt;
              &lt;/div&gt;
              &lt;div class=&quot;carousel-item&quot;&gt;
               &lt;img class=&quot;d-block w-100&quot; src=&quot;https://source.unsplash.com/250x150/?sig=3&quot; alt=&quot;...&quot;&gt;
              &lt;/div&gt;
             &lt;/div&gt;
            &lt;/div&gt;
           &lt;/div&gt;
           &lt;div class=&quot;col-sm-6 col-lg-3&quot;&gt;
            &lt;h5&gt;Links&lt;/h5&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
            &lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
           &lt;/div&gt;
           &lt;div class=&quot;col-sm-6 col-lg-5&quot;&gt;
            &lt;h5&gt;Paragraph&lt;/h5&gt;
            &lt;p&gt;Lorem, ipsum dolor sit amet consectetur adipisicing elit. Veniam impedit itaque minus distinctio possimus reiciendis et repellat. Voluptate, temporibus veniam et praesentium alias, maxime repudiandae aliquid, natus omnis animi iste!&lt;/p&gt;
           &lt;/div&gt;
          &lt;/div&gt;
         &lt;/div&gt;
        &lt;/li&gt;
       &lt;/ul&gt;
      &lt;/div&gt;
     &lt;/nav&gt;
    &lt;/div&gt;
   &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  <p>and here is the css:</p>
  <pre><code>.megamenu-li {
      position: static;
  }
  
  .megamenu {
      position: absolute;
      width: 100%;
      left: 0;
      right: 0;
      padding: 15px;
  }
  </code></pre>
  <p>I already tried to include what was displayed on the dev mode in Google Chrome, but it didn't change anything.</p>