Javascript CSS水平选项卡菜单溢出隐藏内容框的顶部

我有一个CSS水平菜单，它的标签数量取决于php的mysql查询。最近，我得到了太多的标签，以至于它在标签的第一行下面溢出，并且隐藏了内容框的顶部

我希望选项卡在窗口右侧溢出，并隐藏溢出，但如果选项卡溢出，则会出现箭头

以下是菜单的html代码示例：

<ul id="tabs">
    <li class="active" id="tabFirstCategory"><a href="#" onclick='showHideTabs("FirstCategory");'>FirstCategory</a>
    <li class="active" id="tabSecondCategory"><a href="#" onclick='showHideTabs("SecondCategory");'>SecondCategory</a>
</ul>
<div id="tabcontent" class="clear">Some Content</div>

---

如果可能的话，我希望有一个CSS解决方案，但我也不反对使用javascript。（由于管理政策的原因，没有jquery。）

您需要以这种方式创建html

<div class="menu-outer">
  <img src="left-arrow.png" onclick="moveMenu( -10 )" />
  <ul>
    ...
  </ul>
  <img src="right-arrow.png" onclick="moveMenu( 10 )" />
</div>

...

默认情况下，将“图像显示”设置为“无”（使用css类菜单）。添加使此图像可见的类（例如“大”）（将用于div）

现在，对于javascript-在加载时检查菜单是否适合宽度（ul的offsetWidth与div的offsetWidth）-如果不适合，将“large”类添加到div（“menu outer large”）-这样按钮就会出现

---

使用position:relative移动ul并将其设置为左侧。

您将无法仅使用css进行移动。你需要一些js。顺便说一句，“由于管理政策，没有jquery”-这是什么意思？@easwee：这意味着，我的上级不会批准，因为我们即将发布，将所有web应用程序更改为使用jquery将花费太多时间。@easwee：否则，如果只有我，我有时间，我会使用它。呵呵，糟糕透了。但是，就速度而言，jQuery应该使开发更快。但我理解你的处境，回答得很好。这对我很有帮助。非常感谢。

<div class="menu-outer">
  <img src="left-arrow.png" onclick="moveMenu( -10 )" />
  <ul>
    ...
  </ul>
  <img src="right-arrow.png" onclick="moveMenu( 10 )" />
</div>