Question

问题是当我使浏览器窗口变小时，菜单会中断。我怎样才能防止这种情况发生（我是新手！）？指出我的代码中的错误或需要更改的内容会很有帮助。这是我的css代码：

ul {
    margin: 0px;
    padding: 0px;
    list-style-type: none;
    list-style-image: none;
    list-style-position: outside;
    overflow: visible;
    position: static;
}
ul li {
    border: 1px solid #000000;
    display: block;
    position: relative;
    float: left;
    right: -4px;
    background-color: white;
}
li ul {
    display: none;
    background-color: #3333ff;
}
ul li a {
    padding: 10px 18px 5px 90px;
    background: #3333ff none repeat scroll 0% 50%;
    text-decoration: none;
    white-space: nowrap;
    color: #ffffff;
    overflow: visible;
    text-align: center;
    display: block;
}
ul li a:hover {
    background: #3366ff none repeat scroll 0% 50%;
    overflow: visible;
}
li:hover ul {
    display: block;
    position: absolute;
    overflow: visible;
}
li:hover li {
    float: none;
    background-color: #3366ff;
}
li:hover a {
    background: #2346b1 none repeat scroll 0% 50%;
} 
li:hover li a:hover {
    background: #40a3f6 none repeat scroll 0% 50%;
}
    #drop-nav li ul li {
    border-top: 0px none;
    overflow: visible;
    visibility: visible;
    width: 140px;
    font-family: Arial, Helvetica, sans-serif;
    display: table-row-group;
    text-align: left;
}

这是我的HTML代码：

<ul id="drop-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>

        <ul>
            <li><a href="#">Methods</a></li>
            <li><a href="#">Strategies</a></li>
            <li><a href="#">Phoneme Images</a></li>
            <li><a href="#">Alphabet Images</a></li>
        </ul>
    </li>
    <li><a href="#">Reading By The Rules</a>
        <ul>
            <li><a href="#">Joomla&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;nbsp;</a></li>
            <li><a href="#">Drupal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;</a></li>
            <li><a href="#">Phoneme Images&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
        </ul>
    </li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
 </ul>

Answer 1

在不尝试更改现有CSS的情况下，一个简单的修复方法是为#drop-nav分配固定宽度。在重新调整浏览器大小时，您的内容将变为可滚动。

fiddle上的现场演示。

当浏览器窗口调整大小时，如何防止水平菜单中断？

1 个答案: