Question

如果您在此处缩小我的测试页：http://www.linestop.com/Linestop2015/index.php 要显示移动下拉菜单，您会注意到并非所有子菜单项都在显示。我怎样才能解决这个问题？你能救我吗？

Here is my CSS
#navigation { padding:0 21px;  margin-bottom: 0; }

.sf-menu{
    margin-bottom: 0;    
}

.top-nav,.sf-menu li{
    background: transparent;
}

.sf-arrows .sf-with-ul:after{
    border-top-color: #ff9000;
}

.sf-menu ul li,.sf-menu ul ul li,.sf-menu ul ul ul li {
    background: #fff;
}

.sf-menu li:hover, .sf-menu li.sfHover {
    background: #ff9000;
}

.sf-menu a{
    color: #070707;
    border:none;
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    font-size: 1.2em;
    padding-left: 2em;
    padding-right: 2em;
}

.small-top-menu{
    display: none
}

.small-top-menu select{
    padding: 5px;
    background: #68ceef;
    font-family: 'Open Sans', sans-serif;    
    text-transform: uppercase;
    border:5px solid #fff;
    margin: 10px 0;
}
.small-top-menu select option{
    padding: 10px;
}
#navigation ul li a { color: #4a4a4a; padding: 0 7px; display:block; height: 21px; line-height: 21px; border: 2px solid transparent; border-radius: 3px; -moz-border-radius: 3px; -webkit-border-radius: 3px; -o-border-radius: 3px; width:100% }
#navigation ul li.active a,
#navigation ul li a:hover { border: 2px solid #029cdb;  background: url(images/nav-btn.png) repeat-x 0 0; color:#fff; text-decoration: none; }
#navigation a.nav-btn { display:none; }


Here is my mobile menu css
#navigation { position:relative; z-index: 100; padding:0 0px; margin:0 10px;  }
    #navigation a.nav-btn {  margin-bottom: 15px; text-decoration: none; padding:0 36px 0 10px; line-height:30px;  display:block; background: url(images/navigation.png) repeat-x 0 0; height: 30px; position: relative; }
    #navigation a.nav-btn span { background: url(images/dd-nav-arrs.png) no-repeat 0 bottom; width: 20px; height: 15px;  position:absolute; top: 8px; right: 12px; }
    #navigation a.nav-btn.active span { background-position:0 0; }

    #navigation ul { display:none;  position: absolute; top: 30px; left: 0; width: 100%; }  
    #navigation ul li { float:none; height: 30px; border-top: 1px solid #fff; display:block; padding:0 0 0 0; background: url(images/navigation.png) repeat-x 0 0; }
    #navigation ul li a { border: 0; line-height:30px;  float:none; height: 30px; display: block; font-size: 14px; padding-left: 20px; padding-right: 20px; width:100%; border-radius: 0px; -moz-border-radius: 0px; -webkit-border-radius: 0px; -o-border-radius: 0px; box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; } 
    #navigation ul li a:hover { background-image:url(images/blue-btn.png); border:0;  }
    #navigation ul li.active span { background: transparent; border:0; }
    #navigation ul li.first { display:block; }

Here is my html code 
<nav id="navigation"> <a href="#" class="nav-btn">HOME<span></span></a>
                  <section>
            <ul class="sf-menu large-12">
              <li class="active"><a href="index.html">Home</a></li>
               <li class="has-dropdown"><a href="services.html">Services</a>
                <ul class="dropdown">
                  <li class="has-dropdown"><a href="pipeline-hot-tapping-services.php">Hottap Services</a>
                    <ul class="dropdown">
                      <li><a href="hot-tap-line-stop-by-pass-free-quote.php">Hottap Free Quote</a></li>
                    </ul>
                  </li>
                  <li><a href="pipeline-line-stop-services.php">Linestop Services</a>
                  <ul class="dropdown">
                    <li><a href="hot-tap-line-stop-by-pass-free-quote.php">Linestop Free Quote</a></li>
                    </ul></li>
                   <li><a href="valve-replacement-installation-services.php">Valve Installations Services</a>
                  <ul class="dropdown">
                    <li><a href="valve-replacement-installation-free-quote.php">Valve Install Free Quote</a></li>
                    </ul></li>
                     <li><a href="pipeline-bypass-services.php">Pipeline Bypass Services</a>
                  <ul class="dropdown">
                    <li><a href="hot-tap-line-stop-by-pass-free-quote.php">Pipe Bypass Free Quote</a></li>
                  </ul></li>
                </ul>
              </li>

               <li class="has-dropdown"><a href="services.html">Line Stop Equipment</a>
                <ul class="dropdown">
                  <li class="has-dropdown"><a href="#">Hottap Machines</a>
                    <ul class="dropdown">
                    <li><a href="small-hottap-tapping-machines.php">Small Machines</a></li>
            <li><a href="large-hottap-tapping-machines.php">Large Machines</a></li>
                    </ul>
                  </li>
                  <li><a href="#">Linestop Machines</a>
                  <ul class="dropdown">
                      <li><a href="QualTech-QT-Linestop-Machine-Services.php">QualTech QT Linestop Machines</a></li>
            <li><a href="Linestop-Softstop-100-LinestopMachines.php">IFT Soft Stop 100</a></li>
            <li><a href="http://www.linestop.com/Linestop-Pivot-Head-LineStoppingMachines.php">IFT Top Pivot Stop 1000</a></li>
            <li><a href="Linestop-Folding-Head-LineStoppingMachines.php">IFT Folding Heads</a></li>
                    </ul></li>
                  <li><a href="#">Hottap / Linestop Fittings</a>
                  <ul class="dropdown">
                      <li><a href="499-Fittings-Sleeves-Saddles.php">IFT 499 Fittings Copper, Steel &amp; PVC</a></li>
            <li><a href="Mechanical-Joint-Linestop-Sleeve.php">IFT Mechanical Joint Fittings</a></li>
            <li><a href="STP-Stainless-Steel-Hottap-Linestop-Fitting.php">IFT Stainless Steel Hottap Linestop Fittings</a></li>
            <li><a href="IFT-On-Size-Weld-Linestop-Fitting.php">IFT On-Size Folder Weld Type Fittings</a></li>
            <li><a href="IFT-Series-400-Concrete-Cylinder-Fittings.php">IFT 400 Series Fittings CMLC</a></li>
            <li><a href="IFT-Series-500-Linestop-Fitting-Services.php">IFT 500 Series Fittings CMLC</a></li>
            <li><a href="Linestop-AWWA-Fittings.php">AWWA - Fittings</a></li>
            <li><a href="linestop-knife-gate-valves.php">Flanged Steel Knife Gate Valves</a></li>
            <li><a href="Completion-Plug-Assemblies.php">Completion Plug Assemblies</a></li>
                    </ul></li>
                      <li><a href="linestop-cups-all.php">All 2.5"-54.6" Linestop&trade; Cups</a></li>
                </ul>
              </li>
                <li class="has-dropdown"><a href="services.html">About us</a>
                <ul class="dropdown">
                    <li><a href="contactus.php">Contact Us</a></li>
  <li><a href="customers.php">Customers</a></li>
  <li><a href="line-stop-location.php">Location</a></li>
       <li><a href="Mechanical-Job-Application.php">Job Application</a></li>
     <li><a href="http://www.linestop.com/catalog/index.php">Online Flip Catalog</a></li>
     <li><a href="http://www.linestop.com/Linestop-Facebook-Fan-Page.php">Facebook Fan Page</a></li>
                </ul>
              </li>
              <li><a href="contact.html">Featured Jobs</a></li>
            </ul>
          </section>
        <div class="cl">&nbsp;</div>
      </nav>

Thanks, Jesse

Answer 1

查看#navigation ul样式，position: absolute;属性应仅应用于第一个UL（'.sf-menu'）。同时检查.sf-menu ul样式，它应该具有绝对位置。并从#navigation ul li中删除高度，因为某些项目有子菜单，但由于高度仅为30px，因此无法看到它们。

Answer 2

我找到了问题的答案。试图使菜单太复杂，没有简单的修复。所以我不得不回到原始代码，只需使用移动菜单进入主导航菜单。似乎工作正常...感谢您的帮助！

响应式菜单未显示移动版本中的所有下拉菜单

2 个答案: