css - Bootstrap col 3 下拉菜单不显示全宽子菜单

Question

我尝试用 CSS 创建一个大型菜单。实际上它在我的导航之外工作得很好。我用 3 列设计我的导航栏。在中间，我放了下拉菜单，但子菜单扩展到 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 {
    	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