CSS horizontal tab menu overflow hide the top of the content box

I've got this CSS Horizontal menu which number of tabs is dependant to a mysql query made by php. Recently, I got so many tabs, that it overflow under the first line of tab, and hide the top part of the content box.

I would like the tabs to overflow right of the window, with overflow hidden, but that an arrow would appear if the tabs are overflowing.

Here is an example of the html code of a menu:

<ul id="tabs">
    <li class="active" id="tabFirstCategory"><a href="#" onclick='showHideTabs("FirstCategory");'>FirstCategory</a>
    <li class="a开发者_如何学Cctive" id="tabSecondCategory"><a href="#" onclick='showHideTabs("SecondCategory");'>SecondCategory</a>
</ul>
<div id="tabcontent" class="clear">Some Content</div>

And here is the CSS which style the menu and content box

body
{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
}

ul#tabs
{
position:fixed;
width:100%;
background-color:#ffffff;
border-bottom-style: solid;
border-color: #d3d3d3;
border-width: 1px;
z-index:2;
}

ul#tabs, ul#tabs li
{
float:left;
margin:0;
padding:0;
list-style:none;
}

ul#tabs .active
{
font-weight:bold;
}

ul#tabs li a
{
float:left;
padding:4px 10px 4px;
border:1px solid #d3d3d3;
border-bottom:none;
margin-right:4px;
}

ul#tabs .active a
{
background-color:#edf4f9;
}

.clear
{
clear:both;
/*for IE6 pos*/
width:100%;
overflow:hidden;
}

#tabcontent
{
position:relative;
top:25px;
margin-bottom:25px;
}

If possible I would like to have a CSS Solution to it, but I'm not against using javascript too. (No jquery, due to managerial policy.)

You need to make your html this way

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

By default set image display to none ( using css class menu-outer ). Add class ( for ex. 'large' ) which make this images visible ( will be used for div )

Now for javascript - check on load if menu fits width ( offsetWidth of ul vs. offsetWidth of div ) - if no, add 'large' class to div ( 'menu-outer large' ) - so buttons will appear

move ul using position: relative and setting its left.