Jmenu jquery plugin will not work if i replave the with @Html.ActionLink

Question

I have the following JMenu inside my asp.net mvc3 web application:-

<ul id="jMenu"> <li><a class="fNiv">Home</a>
                <!-- Do not forget the "fNiv" class for the first level links !! --> 
                <ul> <li class="arrow"></li> 
                <li><a>Category 1.2</a> 
                <ul> <li><a>Category 1.3</a></li> 
                <li><a>Category 1.3</a></li> 

But if i replace the <a class="fNiv">Home</a> with <div class="fNiv">@Html.ActionLink("Home", "Index", "Home")</div>, then the Jmenu will not show the submenus when i move the mouse over the Home action link. So is there a way to let the Jmenu works on @htmk.actionlink same as for the links BR

:::Updated:::-

I changed my Html.Actionlink to be

<li>@Html.ActionLink("Home", "Index", "Home", new { @class="fNiv" }, null)

but i am getting the following error when i move the mouse over the menu:-

Microsoft JScript runtime error: 'ULWidth' is undefined on the following code:-

ChildList.css({top:position.top,left:position.left+ULWidth,width:ULWidth}).children().css({width:ULWidth

Answer 1

As the comment says, you should apply the "fNiv" class to the first level anchor. :)

In the plug-in, they bind all anchors applied with "fniv" class with mouse over event to show sub menu.Hence, if you do NOT apply "fniv" class over your parent link, the sub menu will never shown.

        /* Actions on parents links */
        if(!opts.openClick)
        $('#jMenu li a.fNiv').bind({
            mouseover:function(){
                var $this = $(this);
                var $child = $this.next();
                ULWidth = $.jMenu._returnUlWidth($this);
                $.jMenu._closeList($("#jMenu ul"));
                if($child.is(':hidden'))
                    $.jMenu._showFirstChild($this);
            }
        });
        else
        $('#jMenu li a.fNiv').bind({
            click:function(e){
                e.preventDefault();
                var $this = $(this);
                var $child = $this.next();
                ULWidth = $.jMenu._returnUlWidth($this);
                $.jMenu._closeList($("#jMenu ul"));
                if($child.is(':hidden'))
                    $.jMenu._showFirstChild($this);
            }
        });

EDIT : Replace <a class="fNiv">Home</a> with this. <%=@Html.ActionLink("Home", "Index", "Home", new { @class="fNiv" })%> It should work fine.