how to scroll horizontally when contend in more in panel (already use overflow-x: scroll )?

Question

can you please tell me how to scroll horizontally when contend is more in horizontally ?I already apply overflow-x: scroll; .But it not work for me .

I am getting contend out side the panel .it should scroll when contend is more .?can we scroll in panel ?

http://jsfiddle.net/mXyHL/8/ I just click "button " on header it open panel and expand all nodes .my node goes outside the panel ?

can we scroll horizontally ?

<div data-role="page">    
    <div data-role="header" data-position="fixed">
        <a href="#menu-panel" data-icon="grid" data-iconpos="notext">Cancel</a> <h1>Home</h1>
    </div>
    <div data-role="panel" id="menu-panel">
        <div id="tree">
    <ul>
        <li id="a">a</li>
        <li id="b">b
            <ul>
                <li id="b-a-1">b-a</li>
                <li id="b-b-2">b-b
                    <ul>
                        <li id="b-b-a">b-b-a
                         <ul>
                        <li id="s-b-b-a">ssb-b-a
                              <ul>
                        <li id="sv-b-b-a">svvsb-b-a</li>
                        <li id="svvs-b-b-b">svvsb-b-b</li>
                    </ul>
                             </li>
                        <li id="ss-b-b-b">ssb-b-b</li>
                    </ul>

                        </li>
                        <li id="b-b-b">b-b-b</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li id="c-1">c
            <ul>
                <li id="not-c-a-1">c-a</li>
                <li id="not-c-b-2">c-b</li>
            </ul>
            </li>

    </ul>
</div>
    </div><!-- /panel -->       
</div><!-- /page -->

Answer 1

You're defining you CSS wrong. It should be #menu-panel , not .menu-panel . You gave your div an ID, not a class.