2

我的屏幕顶部有一个固定菜单，效果很好，但是当我让浏览器窗口变小时，而不是菜单中的所有元素都保持在原来的位置，它们都在菜单下方的下拉菜单中保持在打开窗户。我的想法是，当窗口变小时，我希望位置不会变得固定，因此它们保持在原位并可以滚动以查看其余内容。这可能吗？

这是菜单标题的html代码：

<div id="head_wrapper">
        <div id="head_company"></div><!---end head_company--->
        <div id="head_name"></div><!---end head_name---->

        <div id="head_search"></div><!---end head_search--->
        <div id="head_home" onclick="location.href='overview.php';"></div><!---end head_home--->
        <div id="head_settings" onclick="location.href='settings.php';"></div><!---end head_settings--->
        <div id="head_more"></div><!---end head_more--->


    </div><!---end head_wrapper--->

这是它的CSS：

#wrapper #head_wrapper {
    background-image: url(../images/general/head_bar.png);
    background-repeat: repeat-x;
    float: left;
    height: 44px;
    min-width: 100%;
    width: auto !important;
    width: 100%;
    position: fixed;
    z-index: 10;
    margin-left: 208px;
}
#wrapper #head_wrapper #head_company {
    background-image: url(../images/general/navs/arion_co_button.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_company:hover {
    background-image: url(../images/general/hover/company_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 84px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_name {
    background-image: url(../images/general/navs/arion_logo.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 144px;
}
#wrapper #head_wrapper #head_more {
    background-image: url(../images/general/navs/head_more.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;

}
#wrapper #head_wrapper #head_more:hover {
    background-image: url(../images/general/hover/head_more_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 40px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings {
    background-image: url(../images/general/navs/head_settings.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_settings:hover {
    background-image: url(../images/general/hover/head_settings_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 73px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home {
    background-image: url(../images/general/navs/head_home.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_home:hover {
    background-image: url(../images/general/hover/head_home_hover.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 72px;
    cursor: pointer;
}
#wrapper #head_wrapper #head_search {
    background-image: url(../images/general/navs/search_bar.png);
    background-repeat: no-repeat;
    float: left;
    height: 40px;
    width: 327px;
    margin-right:15px;
    background-position-y: 5px;
    margin-left:31%;
}

感谢您的任何帮助

4

1 回答 1

1

#wrapper将和#head_wrapper样式更改为：

width: 100%
min-width: 960px; /* set here a fixed value >= menu width */

演示： http: //jsfiddle.net/uPe2L/9/（为了清晰起见，我删除了边距和背景并添加了边框）

顺便说一句，您的代码错误且混乱。你应该使用一个ul li结构。

于 2012-07-28T11:38:09.087 回答