have a navigation menu but I want it to have its drop-down fixed like this:

http://jsfiddle.net/Pnn6V/380/

As you can see in that example, the dropdown is always fixed on the same place no matter what menu is hovered.

I want the same dropdown position on my navigation menu.

code:

@inherits Umbraco.Web.Macros.PartialViewMacroPage
@{

    var rootNode = Model.Content.AncestorOrSelf(1);

    // home node is hardcoded - this might not be right?
    <ul id="menu">
        <li>
            <a href="/" class="drop">Home</a>
            <div class="dropdown_2columns">
                <!-- Begin 2 columns container -->
                <div class="col_2">
                    <h2>Welcome !</h2>
                </div>
            </div><!-- End 2 columns container -->
        </li><!-- End Home Item -->
        @foreach (var mainNode in rootNode.Children())
        {
            int childCount = 1;
            int numChildren = mainNode.Children().Count();
            <li>
                <a href="@mainNode.Url" class="drop">@mainNode.Name</a>
                <div class="dropdown_5columns">
                    <!-- Begin 2 columns container -->
                    <div class="col_5">
                        <h2>@mainNode.Name</h2>
                    </div>
                    @* note if you want ALL descendants change .Children to .Descendats*@
                    @foreach (var childNode in mainNode.Children())
                    {
                        // if first node or new set of three open the div and ul @: is used to stop razor trying to
                        // "balance" the tags
                        if (childCount == 1 || (double)childCount % 3 == 1)
                        {
                            @:<div class="col_1">
                                @:<ul>
                        }
                        <a href="@childNode.Url">@childNode.Name</a>

                        // close the div and list if this is either a multiple of 3 or the last one
                        if ((double)childCount % 3 == 0 || numChildren == childCount)
                        {
                            @:</ul>
                        @:</div>
                        }
                        childCount++;
                    }
                </div>
            </li>
        }
    </ul>
}