Untitled

<html>
<head>
<script type="text/javascript">
var selecteditem;
function load()
{
    var lists = document.getElementById('container').getElementsByTagName('ol');
    for ( var i = 0; i < lists.length; i++ )
    {
        if ( lists[i].className == 'itemList' ) continue;

        lists[i].onscroll = updateSelecteditem;
        var items = lists[i].getElementsByTagName('li');
        for ( var j = 0; j < items.length; j++ )
        {
            items[j].onclick = function() { changeFocus(this, true); };
        }
    }
}

function changeFocus(item, force)
{
    if ( selecteditem ) selecteditem.className = '';
    selecteditem = item;
    selecteditem.className = 'selected';
    if ( force ) selecteditem.scrollIntoView(true);
}

function updateSelecteditem(event)
{
    var items = event.currentTarget.getElementsByTagName('li');
    var height = event.currentTarget.scrollHeight;
    var displayHeight = event.currentTarget.clientHeight;
    var scrollPosition = event.currentTarget.scrollTop;
    var reverse;
    if ( scrollPosition > ( selecteditem.offsetTop + (.15 * selecteditem.scrollHeight) ) )
    {
        reverse = false;
    }
    else if ( scrollPosition < ( selecteditem.offsetTop - (selecteditem.scrollHeight) ) )
    {
        reverse = true;
    }
    else
    {
        return;
    }
    for ( var next = nextNode(selecteditem, reverse); nextNode(next, reverse); next = nextNode(next, reverse) )
    {
        if ( next.offsetTop > scrollPosition )
        {
            changeFocus(next);
            return;
        }
    }
}

function nextNode(node, reverse)
{
    return ( reverse ? node.previousSibling : node.nextSibling );
}
</script>
<style type="text/css">
html, body { width: 100%; }
#container
{
    position: relative;
    top: 4em;
    height: 650px;
    width: 90%;
    z-index: 10;
}

ol.itemList li ol
{
    display: none;
    width: 100%;
    position: absolute;
    top: -20px;
    bottom: 0px;
    right: 0px;
    padding: 10px;
    width: 80%;
    border: 2px white groove;
    background: #white;
    list-style: none;
    overflow: auto;
}

.active
{
    display: block !important;
}

ol.active li:last-child
{
    margin-bottom: 200px;
}

ol.itemList li ol li
{
    margin: 5px 10px;
    padding: 10px;
    border: 2px black solid;
    background: grey;
    opacity: .5;
    filter: alpha(opacity=50);
    -moz-border-radius: 15px;
}

.selected
{
    background: white !important;
    opacity: 1 !important;
    filter: alpha(opacity=100) !important;
}

body { position: fixed; }
</style>
</head>
<body onload="load();">
<div id="container">
    <ol class="itemList">
        <li>
            <h2>Category</h2>
            <ol class="active">
                <li>
                    <form name="aaa">
                        <p>AAA: aaa</p>
                        <p>BBB: bbb</p>
                        <p>CCC: ccc</p>
                        <p>DDD: ddd</p>
                        <p>EEE: eee</p>
                        <p>FFF: foo bar baz quux</p>
                    </form>
                </li>
                <li>
                    <form name="aaa">
                        <p>AAA: aaa</p>
                        <p>BBB: bbb</p>
                        <p>CCC: ccc</p>
                        <p>DDD: ddd</p>
                        <p>EEE: eee</p>
                        <p>FFF: foo bar baz quux</p>
                    </form>
                </li>
                <li>
                    <form name="aaa">
                        <p>AAA: aaa</p>
                        <p>BBB: bbb</p>
                        <p>CCC: ccc</p>
                        <p>DDD: ddd</p>
                        <p>EEE: eee</p>
                        <p>FFF: foo bar baz quux</p>
                    </form>
                </li>
                <li>
                    <form name="aaa">
                        <p>AAA: aaa</p>
                        <p>BBB: bbb</p>
                        <p>CCC: ccc</p>
                        <p>DDD: ddd</p>
                        <p>EEE: eee</p>
                        <p>FFF: foo bar baz quux</p>
                    </form>
                </li>
                <li>
                    <form name="aaa">
                        <p>AAA: aaa</p>
                        <p>BBB: bbb</p>
                        <p>CCC: ccc</p>
                        <p>DDD: ddd</p>
                        <p>EEE: eee</p>
                        <p>FFF: foo bar baz quux</p>
                    </form>
                </li>
                <li>
                    <form name="aaa">
                        <p>AAA: aaa</p>
                        <p>BBB: bbb</p>
                        <p>CCC: ccc</p>
                        <p>DDD: ddd</p>
                        <p>EEE: eee</p>
                        <p>FFF: foo bar baz quux</p>
                    </form>
                </li>
                <li>
                    <form name="aaa">
                        <p>AAA: aaa</p>
                        <p>BBB: bbb</p>
                        <p>CCC: ccc</p>
                        <p>DDD: ddd</p>
                        <p>EEE: eee</p>
                        <p>FFF: foo bar baz quux</p>
                    </form>
                </li>
                <li>
                    <form name="aaa">
                        <p>AAA: aaa</p>
                        <p>BBB: bbb</p>
                        <p>CCC: ccc</p>
                        <p>DDD: ddd</p>
                        <p>EEE: eee</p>
                        <p>FFF: foo bar baz quux</p>
                    </form>
                </li>
                <li>
                    <form name="aaa">
                        <p>AAA: aaa</p>
                        <p>BBB: bbb</p>
                        <p>CCC: ccc</p>
                        <p>DDD: ddd</p>
                        <p>EEE: eee</p>
                        <p>FFF: foo bar baz quux</p>
                    </form>
                </li>
                <!--li style="height: 200px; background: #6C706D; border: none !important;"></li-->
            </ol>
        </li>
    </ol>
</div>
</body>
</html>