ブートストラップ3ドロップダウンメニューにフルサイズの子メニューが表示されない

Question

私はcssでメガメニューを作成してみます。実際、それは私のナビの外でうまく動作します。私は3 colで私のナビゲーションバーを設計する。私はドロップダウンメニューを置くが、サブメニューはcol-lg-6まで伸びるが、私はそれを完全に拡張したい。

ul { 
 
     list-style: none; 
 
     } 
 
     
 
     li { 
 
     display: inline-block; 
 
     } 
 
     
 
     a { 
 
     display: block; 
 
     padding: 20px; 
 
     font-family: sans-serif; 
 
     font-size: 2em; 
 
     text-decoration: none; 
 
     color: grey; 
 
     } 
 
     
 
     a:hover { 
 
     background: #efefef; 
 
     } 
 
     
 
     
 
     
 
     li .sub { 
 
     display: none; 
 
     width: 100%; 
 
     height: auto; 
 
     position: absolute; 
 
     left: 0; 
 
     background:#e5e5e5; 
 
     } 
 
     
 
     li:hover .sub { 
 
    \t display: block; 
 
     }

<div class="container"> 
 
      <div class="row"> 
 
       <div class="col-lg-3 col-md-8 logo"> 
 
        LOGO 
 
       </div> 
 
       <div class="col-lg-6 visible-lg hidden-xs"> 
 
        
 
        <ul> 
 
         <li> 
 
          <a href="#">Menu 1</a> 
 
          <div class="sub"> 
 
          <div style="width:35%; height:200px; float:left;"> 
 
           LOGO 
 
          </div> 
 
          <div style="width:65%; height:200px; float:left;"> 
 
           SUB MENU WITH SOME CONTENT 
 
          </div> 
 
          <div style="clear:both;"></div> 
 
          </div> 
 
         </li> 
 
        </ul> 
 
       </div> 
 
       <div class="col-lg-3 col-md-4 hidden-xs"> 
 
        <form id="search" name="search" method="get" action="search.php"> 
 
         <input class="search" type="text" name="tag" id="tag" placeholder="Arama Yap" /> 
 
        </form> 
 
       </div> 
 
      </div> 
 
     </div>

Answer 1

以下はあなたを助けることを願っています：

li .sub { 
    display: none; 
    width: 100%; 
    height: auto; 
    position: fixed; /* changed to fixed from absolute */ 
    left: 0; 
    right: 0; /* added to occupy the full width*/ 
    background:#e5e5e5; 
} 

あなたがここにデモを見ることができます：http://www.bootply.com/xnqkM3x4wd