Zurb foundation 基础6巨型菜单和响应切换导航与小标题标题栏

我想创建一个全宽的下拉菜单，我还可以将它与一个在移动屏幕上具有下拉菜单的顶栏相结合。我在基础上尝试过的任何方法只适用于基础5，因为它们改变了基础6中的顶部条。p> 到目前为止，（在这个线程的帮助下：）我已经能够创建下拉菜单，在小屏幕上，标题栏出现并切换打开。但是，当我尝试使用向下搜索子菜单打开一个项目时，它仍然将其视为一个下拉项目

此外，我注意到，子菜单的全宽悬停以某种方式将屏幕水平推至大量额外的空白空间。虽然我可以通过在下拉窗格类中添加一个max-width:100%来消除多余的空白水平空间，但当我将鼠标悬停在两个子菜单上时，其中的第二个子菜单无法正确显示全宽。虽然在代码笔中，它们显示得很好

这是指向代码笔的链接：

这是我的标题代码

<header>
    <div class="row columns expanded">
      <a href="index.html"><img src="img/REPLogo.png" alt="Real Estate Promo" class="logo show-for-small-only" /></a>
      <div class="title-bar" data-responsive-toggle="main-menu" data-hide-for="medium">
        <button class="menu-icon" type="button" data-toggle></button>
        <div class="title-bar-title">Menu</div>
      </div>

      <div class="top-bar" id="main-menu">
        <div class="top-bar-left"><a href="index.html"><img src="img/REPLogo.png" alt="Real Estate Promo" class="logo hide-for-small-only" /></div>

        <div class="top-bar-right">
          <ul class="vertical medium-horizontal expanded dropdown menu" data-responsive-menu="drilldown medium-dropdown">
            <li><a href="#">About Us</a></li>
            <li><a href="#">Events Calendar</a></li>
            <li class="has-submenu is-drilldown-submenu-parent">
              <a href="#" class="dropdown" data-toggle="megamenu-resources">Resources
                <div class="dropdown-pane" id="megamenu-resources" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
                  <div class="row column expanded">
                    <div class="large-9 columns">
                      <div class="row column expanded">
                        <div class="large-4 columns">
                          <ul>
                            <li><a href="#"><h3>Foreclosure Laws</h3></a></li>
                            <li><a href="#"><img src="img/laws.png" alt="Click for More Info" /></a></li>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                          </ul>
                        </div>

                        <div class="large-4 columns">
                          <ul>
                            <li><a href="lenders.html"><h3>Hard Money Lenders</h3></a></li>
                            <li><a href="#"><img src="img/coin-stack.png" alt="Click for More Info" /></a></li>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                          </ul>
                        </div>

                        <div class="large-4 columns">
                          <ul>
                            <li><a href="glossary.html"><h3>Real Estate Glossary</h3></a></li>
                            <li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info" /></a></li>
                            <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                          </ul>
                        </div>
                      </div>
                    </div>

                    <div class="large-3 columns">
                      <ul>
                        <li><a href="#"><h3>Find a REIA</h3></a></li>
                        <li><a href="#"><img src="img/map-icon.png" alt="Click for More Info"/></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                    <!-- <div class="small-12 large-3 columns">
                      <ul>
                        <li><a href="#">Find a REIA</a></li>
                        <li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info"/></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div> -->
                    <!-- <div class="small-12 large-3 columns">

                    </div>
                    <div class="small-12 large-3 columns">
                      <ul>
                        <li><a href="lenders.html">Hard Money Lenders</a></li>
                        <li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info"/></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                    <div class="small-12 large-3 columns">
                      <ul>
                        <li><a href="glossary.html">Real Estate Glossary</a></li>
                        <li><a href="#"><img src="http://placehold.it/500x250" alt="Click for More Info"/></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div> -->
                  </div>
                </div>
              </a>
            </li>
            <li class="has-submenu is-drilldown-submenu-parent">
              <a href="#" class="dropdown" data-toggle="megamenu-property-listings">Property Listings
                <div class="dropdown-pane" id="megamenu-property-listings" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
                  <div class="row column expanded">
                    <div class="small-12 large-3 columns">
                      <ul>
                        <li><a href="#">All Properties</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>

                    <div class="small-12 large-4 columns">
                      <ul>
                        <li><a href="#">Single Family Properties</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>

                    <div class="small-12 large-4 columns">
                      <ul>
                        <li><a href="#">Multi Family Properties</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <li class="has-submenu is-drilldown-submenu-parent">
              <a href="#" class="dropdown" data-toggle="megamenu-websites">Get a Website
                <div class="dropdown-pane" id="megamenu-websites" data-dropdown data-options="closeOnClick:true; hover: true; hoverPane: true">
                  <div class="row column expanded">
                    <div class="small-12 large-6 columns">
                      <ul>
                        <li><a href="#">Get Started</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                    <div class="small-12 large-6 columns">
                      <ul>
                        <li><a href="#">Features</a></li>
                        <li><a href="#"><img src="http://placehold.it/1000x250" alt="Click for More Info" /></a></li>
                        <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam molestie ullamcorper nisl, sit amet tristique est dapibus nec.</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </a>
            </li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">Sign In</a></li>
          </ul>
        </div>
      </div>
    </div>
  </header>

菜单





Lorem ipsum dolor sit amet，是一位杰出的献身者。乌拉姆科佩尔·尼塞尔是一名分子，他是nec公司的首席执行官




Lorem ipsum dolor sit amet，是一位杰出的献身者。乌拉姆科佩尔·尼塞尔是一名分子，他是nec公司的首席执行官




Lorem ipsum dolor sit amet，是一位杰出的献身者。乌拉姆科佩尔·尼塞尔是一名分子，他是nec公司的首席执行官




Lorem ipsum dolor sit amet，是一位杰出的献身者。乌拉姆科佩尔·尼塞尔是一名分子，他是nec公司的首席执行官





Lorem ipsum dolor sit amet，是一位杰出的献身者。乌拉姆科佩尔·尼塞尔是一名分子，他是nec公司的首席执行官




Lorem ipsum dolor sit amet，是一位杰出的献身者。乌拉姆科佩尔·尼塞尔是一名分子，他是nec公司的首席执行官




Lorem ipsum dolor sit amet，是一位杰出的献身者。乌拉姆科佩尔·尼塞尔是一名分子，他是nec公司的首席执行官





Lorem ipsum dolor sit amet，是一位杰出的献身者。乌拉姆科佩尔·尼塞尔是一名分子，他是nec公司的首席执行官




Lorem ipsum dolor sit amet，是一位杰出的献身者。乌拉姆科佩尔·尼塞尔是一名分子，他是nec公司的首席执行官

只需删除

宽度：100%

，以及

最大宽度：100%

， 改为使用

width:auto

和

left:0px！重要提示

，一切正常