Javascript HTML-CSS：自定义菜单不会水平滚动

我是HTML/CSS新手。我想做一个菜单栏，它会固定在我的页面底部。我正在根据用户菜单选择执行各种javascript操作。我的菜单是这样的：

我的菜单栏的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>

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

---

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

添加

溢出：滚动到#菜单栏

添加
溢出：滚动到#菜单栏

几个变化：

#menubar {    
    overflow-x: auto;
}

及

应该足够了
 两个变化：

#menubar {    
    overflow-x: auto;
}

及

应该足够了
 如果不想
溢出：滚动，或许您可以尝试应用
溢出：自动到巡更页面的
正文
<代码>自动
仅在发生
溢出时添加滚动条。
如果不想
溢出：滚动，或许您可以尝试应用
溢出：自动到巡更页面的
正文
<代码>自动
仅在发生
溢出时添加滚动条。
感谢您的建议，非常感谢。溢出：滚动，但是，添加一个滚动条直接到我的div。我希望整个页面滚动和浏览器窗口有滚动条。添加位置：绝对；到#菜单栏css，并添加overflow-x:scroll到主体css。似乎，我不能使用position:absolute，因为我希望我的菜单栏固定在页面底部（实际上是30px）。如果我使用position:absolute，菜单将与页面垂直滚动，这是我不想要的。谢谢你的意见。谢谢你的建议，谢谢。溢出：滚动，但是，添加一个滚动条直接到我的div。我希望整个页面滚动和浏览器窗口有滚动条。添加位置：绝对；到#菜单栏css，并添加overflow-x:scroll到主体css。似乎，我不能使用position:absolute，因为我希望我的菜单栏固定在页面底部（实际上是30px）。如果我使用position:absolute，菜单将与页面垂直滚动，这是我不想要的。不过谢谢你的投入。谢谢。向菜单栏添加溢出实际上会向div（菜单）本身添加一个滚动条。我真的希望整个页面滚动，浏览器窗口有滚动条。谢谢。向菜单栏添加溢出实际上会向div（菜单）本身添加一个滚动条。实际上，我希望整个页面滚动，浏览器窗口有滚动条。水平滚动第2页。不与页面垂直滚动，并固定在底部。总之，我希望我的菜单：1。水平滚动第2页。不要与页面垂直滚动，并固定在底部。
menubar2 {
    white-space: nowrap;
}