title: Full width Megamenu using only css
body: <p>I want to develop a full width Mega menu
  May kindly see this
  <a href="http://codepen.io/tanmoy911/pen/KzjVdq" rel="nofollow">http://codepen.io/tanmoy911/pen/KzjVdq</a></p>
  
  <p>My CSS code is 12 column grid system</p>
  
  <pre><code>.fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}
  .fui-navbar li{float:left}.fui-navbar li a{display:block;padding:.5em 1em}.fui-navbar li a:hover{color:#000;background-color:#ccc}
  .fui-navbar .fui-dropdown-hover,.fui-navbar .fui-dropdown-click{position:static}
  .fui-navbar .fui-dropdown-hover:hover,.fui-navbar .fui-dropdown-hover:first-child,.fui-navbar .fui-dropdown-click:hover{background-color:#ccc;color:#000}
  .fui-navbar a{text-decoration:none!important}
  .fui-navbar .fui-right{float:right!important}
  .fui-navbar a,fui-dropdown-content a
  {-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s}
  .fui-dropdown-click,.fui-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
  .fui-dropdown-hover:hover .fui-dropdown-content{display:block;z-index:1}
  .fui-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}
  .fui-dropdown-content a{padding:6px 16px;display:block}
  .fui-dropdown-content a:hover{background-color:#ccc}
  .fui-container:after,.fui-row:after,.fui-row-padding:after,.fui-topnav:after,.fui-clear:after,.fui-btn-group:before,.fui-btn-group:after
  {content:"";display:table;clear:both}
  
  /*Grid System*/
  .fui-col,.fui-half,.fui-third,.fui-twothird,.fui-threequarter,.fui-quarter{float:left;width:100%; padding: 0.375em;}
  .fui-col,.fui-half,.fui-third,.fui-twothird,.fui-threequarter,.fui-quarter{float:left;width:100%}
  .fui-col.l1{width:8.33333%}
  .fui-col.l2{width:16.66666%}
  .fui-col.l3,.fui-quarter{width:24.99999%}
  .fui-col.l4,.fui-third{width:33.33333%}
  .fui-col.l5{width:41.66666%}
  .fui-col.l6,.fui-half{width:49.99999%}
  .fui-col.l7{width:58.33333%}
  .fui-col.l8,.fui-twothird{width:66.66666%}
  .fui-col.l9,.fui-threequarter{width:74.99999%}
  .fui-col.l10{width:83.33333%}
  .fui-col.l11{width:91.66666%}
  .fui-col.l12{width:99.99999%}
  </code></pre>
  
  <p><strong>HTML is</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.fui-navbar{list-style-type:none;margin:0;padding:0;overflow:hidden}
      .fui-navbar li{float:left}.fui-navbar li a{display:block;padding:.5em 1em}.fui-navbar li a:hover{color:#000;background-color:#ccc}
      .fui-navbar .fui-dropdown-hover,.fui-navbar .fui-dropdown-click{position:static}
      .fui-navbar .fui-dropdown-hover:hover,.fui-navbar .fui-dropdown-hover:first-child,.fui-navbar .fui-dropdown-click:hover{background-color:#ccc;color:#000}
      .fui-navbar a{text-decoration:none!important}
      .fui-navbar .fui-right{float:right!important}
      .fui-navbar a,fui-dropdown-content a
      {-webkit-transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s;transition:background-color .3s,color .15s,box-shadow .3s,opacity 0.3s}
      .fui-dropdown-click,.fui-dropdown-hover{position:relative;display:inline-block;cursor:pointer}
      .fui-dropdown-hover:hover .fui-dropdown-content{display:block;z-index:1}
      .fui-dropdown-content{cursor:auto;color:#000;background-color:#fff;display:none;position:absolute;min-width:160px;margin:0;padding:0}
      .fui-dropdown-content a{padding:6px 16px;display:block}
      .fui-dropdown-content a:hover{background-color:#ccc}
      .fui-container:after,.fui-row:after,.fui-row-padding:after,.fui-topnav:after,.fui-clear:after,.fui-btn-group:before,.fui-btn-group:after
      {content:"";display:table;clear:both}
      
      /*Grid System*/
      .fui-col,.fui-half,.fui-third,.fui-twothird,.fui-threequarter,.fui-quarter{float:left;width:100%; padding: 0.375em;}
      .fui-col,.fui-half,.fui-third,.fui-twothird,.fui-threequarter,.fui-quarter{float:left;width:100%}
      .fui-col.l1{width:8.33333%}
      .fui-col.l2{width:16.66666%}
      .fui-col.l3,.fui-quarter{width:24.99999%}
      .fui-col.l4,.fui-third{width:33.33333%}
      .fui-col.l5{width:41.66666%}
      .fui-col.l6,.fui-half{width:49.99999%}
      .fui-col.l7{width:58.33333%}
      .fui-col.l8,.fui-twothird{width:66.66666%}
      .fui-col.l9,.fui-threequarter{width:74.99999%}
      .fui-col.l10{width:83.33333%}
      .fui-col.l11{width:91.66666%}
      .fui-col.l12{width:99.99999%}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ul class="fui-navbar fui-card-2 fui-light-grey"&gt;
        &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Link 1&lt;/a&gt;&lt;/li&gt;
        &lt;li class="fui-dropdown-hover"&gt;
          &lt;a href="#"&gt;Dropdown&lt;/a&gt;
          &lt;div class="fui-dropdown-content fui-white fui-card-4"&gt;
            &lt;a href="#"&gt;Link 1&lt;/a&gt;
            &lt;a href="#"&gt;Link 2&lt;/a&gt;
            &lt;a href="#"&gt;Link 3&lt;/a&gt;
          &lt;/div&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
      
      &lt;ul class="fui-navbar fui-large fui-left-align"&gt;
         &lt;header class="fui-container fui-white fui-large"&gt;
            &lt;ul class="fui-navbar"&gt;
              &lt;li&gt;&lt;a class="fui-padding-24 fui-text-brown fui-hover-blue fui-serif" href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a class="fui-padding-24 fui-text-brown fui-hover-blue fui-serif" href="#"&gt;Features&lt;/a&gt;&lt;/li&gt;
              &lt;li class="fui-dropdown-hover"&gt; &lt;a class="fui-padding-24 fui-text-brown fui-hover-blue fui-serif" href="#"&gt;Menu &amp;#9662;&lt;/a&gt;
                &lt;div class="fui-dropdown-content" style="background-color:#F5EEAF"&gt;
                  &lt;ul class="fui-navbar fui-Black fui-left-align"&gt;
                    &lt;div class="fui-col fui-container m3 l3"&gt;
                      &lt;li&gt;&lt;a href="index.html" &gt;Homepage&lt;/a&gt;&lt;/li&gt;
                      &lt;br/&gt;
                      &lt;br/&gt;
                      &lt;li&gt;&lt;a href="portfolio1.html"&gt;Our Work (Portfolio)&lt;/a&gt;&lt;/li&gt;
                      &lt;br/&gt;
                      &lt;br/&gt;
                      &lt;li&gt;&lt;a  href="portfolio1.html"&gt;Portfolio of Recon Industries&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="portfolioitem.html"&gt;Portfolio Item Description&lt;/a&gt;&lt;/li&gt;
                      &lt;br/&gt;
                      &lt;li&gt;&lt;a&gt;Services and Features&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="services.html"&gt;Services/Features&lt;/a&gt;&lt;/li&gt;
                    &lt;/div&gt;
                    &lt;div class="fui-col fui-container m3 l3"&gt;
                      &lt;li&gt;&lt;a class="fui-text-brown fui-serif fui-tag"&gt;Product Details&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="products.html"&gt;Products listing &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="productdetails.html"&gt;Product Details&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a class="fui-text-brown fui-serif fui-tag" href="productdetails.html"&gt;Recon Industries Blog &lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="blogposts.html"&gt;Blog Posts&lt;/a&gt;&lt;/li&gt;
                    &lt;/div&gt;
                    &lt;div class="fui-col fui-container m3 l3"&gt;
                      &lt;li&gt;&lt;a&gt;General Pages&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="aboutus.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="contactus.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="faq.html"&gt;Frequently Asked Questions&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="testimonialsclients.html"&gt;Testimonials &amp; Clients&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="404.html"&gt;404 Page (Page Not Found )&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="sitemap.html"&gt;Sitemap&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="termsprivacy.html"&gt;Terms &amp; Privacy&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a  href="comingsoon.html"&gt;Coming Soon&lt;/a&gt;&lt;/li&gt;
                    &lt;/div&gt;
                  &lt;/ul&gt;
                &lt;/div&gt;
              &lt;/li&gt;
              &lt;li&gt; &lt;a class="fui-padding-24 fui-text-brown fui-hover-blue fui-serif" href="credits.html"&gt;Credits&lt;/a&gt; &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/header&gt;
      &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Now I want the menu should be full width or 100% width. That can be achieved separately. I know but I am stuck with my existing code.</p>
  
  <p>How I can change my code so that It shows the menu in full width. Like <a href="http://www.free-css.com/free-css-templates/page193/mpurpose" rel="nofollow">http://www.free-css.com/free-css-templates/page193/mpurpose</a></p>
  
  <p>Pls help.</p>