javascript - HTML-CSS : Custom menu does not scroll horizontally

Question

我是 HTML/CSS 的新手。我正在尝试制作一个固定在页面底部的菜单栏。我正在根据用户菜单选择进行各种 javascript 操作。我的菜单看起来像这样:http://jsfiddle.net/78HPq/

我的菜单栏的 HTML 代码是:

    <div id="menubar" >
<div id="menubar2"  style="width:1200px">
    <ol >
        <li id = 'l1' class="gbt"><a id="a1" onclick="handleLink(1)"    href="javascript:void(0);"><span id = 's1' class="gbts">Link 1</span></a></li>
        <li id = 'l2' class="gbt"><a id="a2" onclick="handleLink(2)"     href="javascript:void(0);"><span id = 's2' class="gbts">Link 2</span></a></li>
        <li id = 'l3' class="gbt"><a id="a3" onclick="handleLink(3)"     href="javascript:void(0);"><span id = 's3' class="gbts">Link 3</span></a></li>
        <li id = 'l5' class="gbt"><a id="a5" onclick="handleLink(5)"     href="javascript:void(0);"><span id = 's5' class="gbts">Link 4</span></a></li>
        <li id = 'l4' class="gbt"><a id="a4" onclick="handleLink(4)"     href="javascript:void(0);"><span id = 's4' class="gbts">Link 5</span></a></li>
    </ol>
</div>
</div>

但是，我遇到的问题是，如果将浏览器窗口的大小调整为小于我的菜单栏，我就看不到水平滚动条。如果我使菜单栏位置相对或绝对，我会得到一个，但我需要“固定”以使其附加到页面底部。

如有任何建议，我们将不胜感激。谢谢，

Answer 1

将 overflow: scroll; 添加到 #menubar。 Demo

#menubar{
    z-index:999;
    bottom: 30px;

    height:65px;
    width: 105%;
    background-color: #060612;
     filter:alpha(opacity=70);
    opacity:0.7;
    line-height:35px;
    overflow: scroll;
    position:absolute;
}

body {
    overflow-x: scroll;    
}