css - 缩小窗口时导航栏折叠

Question

首先是代码:

#menu {
    padding:0;
    margin-top:0px;
    position:absolute;
    top:0px;
    width:100%;
    float:left;
    overflow:hidden;



}


#menu li {
    list-style:none;
    float: left;
    position: relative; 
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
    border:1px solid black; 
    background-image: linear-gradient(#F2FF00, #AEFF00);
    margin-left:10px;
}



#menu a {
    display:block;
    padding:auto;
    text-align:center;
    padding:10px 10px;


    color: #0095FF;
    text-transform: uppercase;
    font: bold 25px Arial, Helvetica;
    text-decoration: none;
    text-shadow: 1px 1px 2px #0095FF;
}

当我缩小窗口时，按钮会向下移动。如果可以将高度设置为菜单，这样它就不会改变，但按钮仍然超出菜单元素，为什么会发生这种情况？

这是 jsFiddle:http://jsfiddle.net/nqdXc/

Answer 1

菜单上的宽度为 100%，并在 li 上向左浮动，如果菜单无法容纳 li，它们将下拉。这是预期的行为。

我不确定你想要达到的效果，但你可以像这样在菜单上设置最小宽度:

#menu {
    min-width: 360px;
}

如果您让我们知道想要的效果是什么，我们也许可以进一步帮助您