как прокручивать по горизонтали, когда на панели больше есть контрагент (уже используется overflow-x: scroll)?

не могли бы вы рассказать мне, как прокручивать по горизонтали, когда contend больше в горизонтальном направлении? Я уже применяю overflow-x: scroll;. Но это не работает для меня.

Я получаю соперничать с панелью.it должен прокручиваться, когда соперник больше. "Можем ли мы прокручивать панель?

http://jsfiddle.net/mXyHL/8/ Я просто нажимаю "кнопку" на заголовке, открывая панель и расширяя все узлы. Мой узел выходит за панель?

мы можем прокручивать по горизонтали?

<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 -->