全幅だけCSS

Question

を使用してMegamenu私は全幅メガメニューに を開発したいが、親切にこの http://codepen.io/tanmoy911/pen/KzjVdq

私のCSSコードは、12列のグリッドシステムで表示される場合があり

.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%} 

HTMLが

です

.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%}

<ul class="fui-navbar fui-card-2 fui-light-grey"> 
 
     <li><a href="#">Home</a></li> 
 
     <li><a href="#">Link 1</a></li> 
 
     <li class="fui-dropdown-hover"> 
 
     <a href="#">Dropdown</a> 
 
     <div class="fui-dropdown-content fui-white fui-card-4"> 
 
      <a href="#">Link 1</a> 
 
      <a href="#">Link 2</a> 
 
      <a href="#">Link 3</a> 
 
     </div> 
 
     </li> 
 
    </ul> 
 
    
 
    <ul class="fui-navbar fui-large fui-left-align"> 
 
     <header class="fui-container fui-white fui-large"> 
 
      <ul class="fui-navbar"> 
 
      <li><a class="fui-padding-24 fui-text-brown fui-hover-blue fui-serif" href="#">Home</a></li> 
 
      <li><a class="fui-padding-24 fui-text-brown fui-hover-blue fui-serif" href="#">Features</a></li> 
 
      <li class="fui-dropdown-hover"> <a class="fui-padding-24 fui-text-brown fui-hover-blue fui-serif" href="#">Menu &#9662;</a> 
 
       <div class="fui-dropdown-content" style="background-color:#F5EEAF"> 
 
       <ul class="fui-navbar fui-Black fui-left-align"> 
 
        <div class="fui-col fui-container m3 l3"> 
 
        <li><a href="index.html" >Homepage</a></li> 
 
        <br/> 
 
        <br/> 
 
        <li><a href="portfolio1.html">Our Work (Portfolio)</a></li> 
 
        <br/> 
 
        <br/> 
 
        <li><a href="portfolio1.html">Portfolio of Recon Industries</a></li> 
 
        <li><a href="portfolioitem.html">Portfolio Item Description</a></li> 
 
        <br/> 
 
        <li><a>Services and Features</a></li> 
 
        <li><a href="services.html">Services/Features</a></li> 
 
        </div> 
 
        <div class="fui-col fui-container m3 l3"> 
 
        <li><a class="fui-text-brown fui-serif fui-tag">Product Details</a></li> 
 
        <li><a href="products.html">Products listing </a></li> 
 
        <li><a href="productdetails.html">Product Details</a></li> 
 
        <li><a class="fui-text-brown fui-serif fui-tag" href="productdetails.html">Recon Industries Blog </a></li> 
 
        <li><a href="blogposts.html">Blog Posts</a></li> 
 
        </div> 
 
        <div class="fui-col fui-container m3 l3"> 
 
        <li><a>General Pages</a></li> 
 
        <li><a href="aboutus.html">About Us</a></li> 
 
        <li><a href="contactus.html">Contact Us</a></li> 
 
        <li><a href="faq.html">Frequently Asked Questions</a></li> 
 
        <li><a href="testimonialsclients.html">Testimonials & Clients</a></li> 
 
        <li><a href="404.html">404 Page (Page Not Found)</a></li> 
 
        <li><a href="sitemap.html">Sitemap</a></li> 
 
        <li><a href="termsprivacy.html">Terms & Privacy</a></li> 
 
        <li><a href="comingsoon.html">Coming Soon</a></li> 
 
        </div> 
 
       </ul> 
 
       </div> 
 
      </li> 
 
      <li> <a class="fui-padding-24 fui-text-brown fui-hover-blue fui-serif" href="credits.html">Credits</a> </li> 
 
      </ul> 
 
     </header> 
 
    </ul>

メニューは全幅または100％幅にする必要があります。それは別々に達成することができます。私は知っているが、私は自分の既存のコードに悩まされている。

メニューを全幅で表示するようにコードを変更する方法を教えてください。 Like http://www.free-css.com/free-css-templates/page193/mpurpose

Plsヘルプ。

Answer 1

さて、あなただけ（.ff-左）新しいクラスを作成し、それがトップメニューに影響を与えないようにFUI - ドロップダウン・コンテンツ・クラスを追加しleft:0ので

が欠落しています。

.ff-left{left:0;} 

はhere