How to right-align a YUI Menu Button?

I'm using a YUI "Menu Button" combo (See here for the documentation). By default, when the menu appears, it's positioned just under the button, and its left edge is lined up with the left edge of the button, but I need my menu's right edge to be lined up with the right edge of the button.

I'm creating both my menu and my button from markup, which is a requirement of the project I'm working on. I'm trying to use the "context" configuration property when constructing the menu, but it doesn't seem to be working. Any ideas? Here's a simplified version of the problem (you can paste it into a local html file, and it should work):

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Menu Buttons</title>



<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/menu/assets/skins/sam/menu.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.0r4/build/button/assets/skins/sam/button.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/yahoo-dom-event/yahoo-dom-event.js"&gt;&lt;/script&gt;

<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/container/container_core-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/menu/menu-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/element/element-min.js"&gt;&lt;/script&gt;
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.0r4/build/button/button-min.js"&gt;&lt;/script&gt;

<!--end custom header content for this example-->

</head>

<body class="yui-skin-sam">

<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

<script type="text/javascript">

    YAHOO.util.Event.onContentReady("right_aligned", function () {

        //  Create a Button using an existing <input> and <ul> element.

        var oMenu = new YAHOO.widget.Menu(
            "menubutton_ul",
            {
                shadow:false,
                context:[ "menubutton2", "tr", "br" ]
            });


        var oMenuButton1 = new YAHOO.widget.Button(
            "menubutton2", 
            {   type: "menu", 
                menu: oMenu });

    });


</script>

<fieldset id="right_aligned" style="text-align:right">
    <legend>Right Aligned</legend>
    <input type="submit" id="menubutton2" value="Right" >
    <div id="menubutton_ul" style="visibility:hidden; position:absolute">
        <div class="bd">
            <ul>
                <li>This is the first menu element.</li>
                <li>This is the second menu element.</li>
                <li>This is the third menu element.</li>
            </ul>
        </div>
    </div>

</fieldset>

</body>
</html>

Thanks so much!

ansaurus

tags:

views:

answers:

How to right-align a YUI Menu Button?

related questions