Untitled

HTML JQUERY implement ARROW DOWN ON UL/LI
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("li,a").keydown(function () {
                    alert("kd");
                });
            });
        </script>
    </head>
    <body>


<div>
        <input type="text" />
        <ul id="sbOptions_54514054" class="sbOptions" style="">
            <li><a href="#-1" rel="-1">--Select one--</a></li>
            <li><a href="#2" rel="2">Windows</a></li>
            <li><a href="#1" rel="1">Siding</a></li>
            <li><a href="#7" rel="7">Roofing</a></li>
        </ul>
    </div>

var chosen = "";
$(document).keydown(function(e){ // 38-up, 40-down
    if (e.keyCode == 40) {
        if(chosen === "") {
            chosen = 0;
        } else if((chosen+1) < $('li').length) {
            chosen++;
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
    if (e.keyCode == 38) {
        if(chosen === "") {
            chosen = 0;
        } else if(chosen > 0) {
            chosen--;
        }
        $('li').removeClass('selected');
        $('li:eq('+chosen+')').addClass('selected');
        return false;
    }
});