css - 在浏览器中缩小时菜单会下降

Question

我正在 asp.net 3.5 上做一个网站元素。当我缩小网络浏览器上的界面时，我的菜单栏的“联系人”选项卡位于下方，“访问”选项卡的行“访问”位于下方。我该如何克服这个问题？

HTML

 <div id="nav">
                <ul>
                    <li><a href="Default.aspx">Home</a></li>
                    <li><a href="#">About us</a></li>
                    <li><a href="#">Reservation</a>
                        <ul>
                            <li><a href="Availability.aspx">Room</a></li>
                            <li><a href="#">Membership</a></li>
                            <li><a href="#">Events</a></li>

                        </ul>
                     </li>
                    <li><a href="#">Places to visit</a></li>
                    <li><a href="#">Travel</a></li>
                    <li><a href="#">Packages</a></li>
                    <li><a href="#">Gallery</a></li>
                    <li><a href="Contact.aspx">Contact us</a></li>
                </ul>
           </div>

CSS

#nav { clear:both; margin:0;
            padding:0;width:900px; height:30px;}

#nav ul { margin:0; padding:0; line-height:30px; }
#nav li { margin:0; padding:0; list-style:none; float:left;
                position:relative;
                background-color:#0066CC/*#1B6187*/;}


#nav ul li a { text-align:center;
                    font-family:Georgia;
                    text-decoration:none;
                    font-size:14px;
                    height:30px; display:block;
                    color:#FFF; width:110.5px;
                     border:1px solid #006363;
                     }
#nav ul ul { position:absolute; visibility:hidden; top:32px;}
#nav ul li:hover ul {visibility:visible;}

#nav li:hover { background:#09F;}
#nav ul li:hover ul li a:hover {background-color:#09F;
                color:#4EE6DB;}
#nav ul li ul li { background-color:#0066CC/*#1B6187*/;}

#nav a:hover { color:#000;}

.clearFloat {clear:both;}

Answer 1

发生这种情况是因为文本在缩放时不能很好地缩放:它比您预期的要大。文本迫使周围的 li 和 a 变得比您想要的更大。

我最近通过固定每个 li 的宽度(例如:width: 30px)解决了同样的问题。文本仍然会比你想要的大，但如果你使用足够的填充，它就有足够的空间来增长。

您还可以尝试将最后一列绝对置于顶部 top:0, right:0，这会变得很丑陋，因为最后一列将覆盖最后一列之前的一列