0

HTML

<div class="menu" id="menu">
    <ul>
        <li><a class="home" id="home" href="">Home</a></li>
            <li><a class="about" id="about" href="">About Us</a>
            <ul>
                <li><a href="">About Us</a></li>
                <li><a href="">About us1</a></li>
                <li><a href="">About us2</a></li>
                <li><a href="">About usn</a></li>
            </ul>
        </li>
        <li><a class="prod" id="prod" href="">Products</a>
            <ul>
                <li><a href="">Product1</a></li>
                <li><a href="">Product2</a></li>
                <li><a href="">Product3</a></li>
            </ul>
        </li>
        <li><a class="contact" id="contact" href="">Contact</a>
            <ul>
                <li><a href="">Contact1</a></li>
                <li><a href="">Contact2</a></li>
                <li><a href="">Contact3</a></li>
            </ul>
        </li>
        <li><a class="program" id="program" href="">Programmes</a>
            <ul>
                <li><a href="">Program1</a></li>
                <li><a href="">Program2</a></li>
            </ul>
        </li>
        <li><a class="gallery" id="gallery" href="">Galleries</a>
            <ul>
                <li><a href="">Photo Gallery</a></li>
                <li><a href="">Video Gallery</a></li>
            </ul>
        </li>
        <li><a class="gallery" id="gallery" href="">Downloads</a>
            <ul>
                <li><a href="">Download1</a></li>
                <li><a href="">Download2</a></li>
            </ul>
        </li>
    </ul>
</div>

我的 div 包装器的 CSS

div.wrapper 
{
    box-shadow: 0 0 30px 5px #999;
    -moz-box-shadow: 0 0 30px 5px #999;
    -webkit-box-shadow: 0 0 30px 5px #999;
    -msie-box-shadow: 0 0 30px 5px #999;
    -o-box-shadow: 0 0 30px 5px #999;
    border-radius: 10px 10px 10px 10px;
    -o-border-radius: 10px 10px 10px 10px;
    -msie-border-radius: 10px 10px 10px 10px;
    -webkit-border-radius: 10px 10px 10px 10px;
    -moz-border-radius: 10px 10px 10px 10px;
    background-color: #E8E8E8;
    width: 1024px; 
    height: 1400px;
    margin: auto;
    position: relative;
}

我的下拉菜单的 CSS

div.menu
{
    font-family: serif, Verdana, Geneva, Arial, helvetica, sans-serif;
    height: 45px;
    width: 1024px;
    background-color: #06472F;
    -msie-border-radius: 0px 0px 5px 5px;
    -o-border-radius: 0px 0px 5px 5px;
    -moz-border-radius: 0px 0px 5px 5px;
    -webkit-border-radius: 0px 0px 5px 5px;
    border-radius: 0px 0px 5px 5px;
    display: table-cell;
}

div.menu ul 
{
    font-size: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

div.menu ul li 
{
    display: block;
    position: relative;
    float: left;
    list-style: none;
}

div.menu ul li ul 
{
    display: none;
}

div.menu ul li a 
{
    border-radius: 2px;
    -msie-border-radius: 2px;
    -o-border-radius: 2px;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    display: block;
    text-decoration: none;
    color: #FFFFFF;
    border-top: 1px solid #FFFFFF;
    padding: 5px 15px 5px 15px;
    background: #06472F;
    margin-left: 1px;
    white-space: nowrap;
}

div.menu ul li a:hover 
{
    color: #FFFF00;
}

div.menu li:hover ul 
{
    display: block;
    position: absolute;
}

div.menu li:hover li 
{
    float: none;
    font-size: 25px;
}

div.menu li:hover li a:hover 
{
    background-color: #000000;
    color: #FFFF00;
}

现在，当我使用 Chrome 并缩小时，当它达到 33% 时，它实际上会转到下一行。如何仅使用 CSS 来防止这种情况发生？

我试过改变大小，但它在菜单末尾留下了额外的空白，这不是我想要的。我还尝试将整个菜单包装在另一个 div 标签中，但它不起作用。我还尝试使用 '%' 使所有大小相对，但仍然没有用。帮助？

4

0 回答 0