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

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的宽度来修复相同的问题（例如：宽度：30px）。文本仍然比你想要的大，但如果你使用足够的填充，它有足够的空间来增长。

你还可以尝试将最后一个李位置绝对顶部：0，右：0，这将变得丑陋，因为最后一个李将覆盖在最后一个之前