Kendo UI

Dynamic Menu

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<ul id="menu">
    <li class="k-state-active">Test 1
        <ul>
            <li>Sub Item 1
                <ul>
                    <li>Sub Sub Item 1</li>
                    <li>Sub Sub Item 2</li>
                </ul>
            </li>
            <li>Sub Item 2</li>
        </ul>
    </li>
    <li>Test 2
        <ul>
            <li>Sub Item 1</li>
            <li>Sub Item 2</li>
        </ul>
    </li>
</ul>

CSS

html { font: 12px Arial, Helvetica, sans-serif; }

JavaScript

kendo.ui.Popup.prototype._update = function() {
     this.options.origin = "top left";
     this.options.position = "top right";
     return this._position($(window));
};

$("#menu")
    .css({
        width: 200,
        margin: "auto"
    })
    .kendoMenu({ 
        orientation: "vertical"
    });