Q: CSS: horizontal scroll in mobile navigation This is a mobile version of my website.

I want to make the sub-nav(Main|Another Long Category|) be able to scroll horizontally. People could touch the screen and scroll(Rather than using scroll bars like what we have in desktop browsers).
How to do it? I don't know what's effect's name, hence don't know how to describe it properly.
UPDATE:

I add overflow-x to it. But it stacks up rather than span into a single line. 
What's the problem here?

A: UPDATE
Based on comments, you need to calculate total width of your menu elements using jQuery:
$(function(){
    var menuWidth=0;
    $('.wrapper a').map(function(){
        menuWidth = menuWidth + $(this).outerWidth(true);
    });
    // + 15px to fix, this maybe vary in your project
    $('.wrapper').css('width', (menuWidth+15)); 
});

On the container CSS class you need to add:
.subnav{
    overflow-y:hidden;
    overflow-x:scroll; 
    -webkit-overflow-scrolling:touch;
}

DEMO: http://jsfiddle.net/HhHGH/
Basic CSS scrolling
Just add overflow:scroll to your CSS nav class or the fancy way:
Fancy CSS scrolling on iOS
You can try using -webkit-overflow-scrolling:touch in your CSS nav class. 
This works pretty well on iOS, for another devices check this questions:
How much support is there for -webkit-overflow-scrolling:touch
Chrome Browser for Android no longer supports -webkit-overflow-scrolling? Is there an alternative?
