Question

我无法让我的下拉导航菜单工作。主要问题是当我在谷歌浏览器中缩小时，菜单开始包装并下降到第二行，导致页面上的所有其他div也被包装。

我已经在互联网上搜索了一个解决方案，但似乎没有任何效果。谢谢你的建议。

HTML：

 <div id="nav">
   <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About us</a></li>
   <li><a href="#">Quality</a></li>
   <li><a href="#">Processes</a></li>
   <li><a href="#">Markets</a></li>
   </ul>
   <ul>
   <li><a href="#">Products</a>
   <ul>
   <li><a href="#">Product information</a></li>
   <li><a href="#">Product number one submenu</a></li>
   <li><a href="#">Product number two submenu</a></li>
   <li><a href="#">Product 3</a></li>
   <li><a href="#">Product 4</a></li>
   <li><a href="#">Product num 5</a></li>
   <li><a href="#">Products 6, more & products</a></li>
   <li><a href="#">Prod numb Seven</a></li>
   <li><a href="#">More products eight</a></li>
   <li><a href="#">More prods, prods and products</a></li>
   <li><a href="#">prod Stock List</a></li>
   </ul>
    </li>
    </ul>
    <ul>
   <li><a href="#">News</a>
   <ul>
   <li><a href="#">Latest news</a></li>
   <li><a href="#">Case Studies</a></li>
   <li><a href="#">Testimonials</a></li>
   </ul>
   </li>
   </ul>
   <ul>
   <li><a href="#">Contact</a>
   <ul>
   <li><a href="#">Contact us</a></li>
    <li><a href="#">Directions</a></li>
   </ul>
   </li>
  </ul>
  </div>

CSS：

     #nav {
background-color:#14c64a;
height:37px;
width:960px;
}

   #nav ul {
   font-family: Arial, Verdana;
   font-size: 14px;
   margin: 0;
      padding: 0;
    list-style: none;
white-space:nowrap;
    }

    #nav ul li {
        display: block;
        position: relative;
       float: left;
     }

    #nav li ul {
    display: none;
    }

    #nav ul li a {
    display: block;
    text-decoration: none;
    color: #ffffff;
    padding: 5px 15px 5px 15px;
    background: #14c64a;
    margin-left: 1px;
    white-space: nowrap;
line-height:27px;
}

#nav ul li a:hover {
background: #666;
}

#nav li:hover ul {
display: block;
position: absolute;
}

#nav li:hover li {
float: none;
font-size: 11px;
}

#nav li:hover a { background: #14c64a; }

#nav li:hover li a:hover {
    background: #1e7c9a;
}

Answer 1

Chrome不希望将字体大小缩小到用户设置的最小字体大小，即使在缩放时也是如此。这会导致文本在缩小时在某个时刻比960px容器更宽。

（您可以通过将最小字体大小设置为设置中的默认字体大小来测试此功能。然后Chrome在缩小时根本不会缩小文本，甚至不会缩小。）

顺便说一下，问题中的代码是a fiddle，因此人们可以立即进行测试。

为什么我的下拉导航菜单换行并放到第二行？

1 个答案: