0

我有一个像这样水平显示的导航菜单。

                <div id="menucontainer">
                <ul id="menu">
                    <li>@Html.ActionLink("Home", "Index", "Home")</li>
                    <li>@Html.ActionLink("About Us", "About_Us", "Home")</li>
                    <li>@Html.ActionLink("What We Do", "What_We_Do", "Home")</li>
                    <li>@Html.ActionLink("FAQ's", "Answers_To_Questions", "Home")</li>
                    <li>@Html.ActionLink("Deed Transfer Gurantee's", "Deed_Transfer_Guarantee", "Home")
                    </li>
                    <li>@Html.ActionLink("Power Point", "Index", "Home")</li>
                    <li>@Html.ActionLink("Get Help", "Index", "Home")</li>
                    <li>@Html.ActionLink("Mortgage Cancellation", "Index", "Home")</li>
                    <li>@Html.ActionLink("Contact", "Index", "Home")</li>
                </ul>
            </div>

我正在寻找一种方法来创建一个只有在特定链接被鼠标悬停时才可见的下拉链接。当 Deed_Transfer_Guarantee 悬停在上方时，我需要 Deed_Transfer_Guarantee ActionLink 来显示另一个 ActionLink。我还没有找到一个明确的例子。提前感谢您的帮助！

4

3 回答 3

2

检查这个jquery 示例。您所要做的就是将“ <span> ***</span>”替换为超链接

于 2012-06-12T19:28:20.843 回答
1

这可能会有所帮助：

$("#menu li a").each(function(){
     var $this = $(this);
     $("<a></a>").html($this.html()).attr("href",$this.attr("href")).addClass("dropdown").slideUp(0).appendTo($this);
}).hover(function(){
    $("a",$(this)).slideDown(500);        
}
,function(){
     $("a",$(this)).slideUp(500);      
});

然后你需要一些CSS：

#menu li>a{position:relative;}
#menu li a a.dropdown {position:absolute;left:0px;top:100%;}

我认为这可以完成工作。

于 2012-06-12T19:36:57.313 回答
0

我认为使用新的 li 标签会给你一个下拉菜单，而不是在线 jquery 示例中的“滑出”。这基本上是大黄蜂的答案。

<script> 
$(document).ready(function(){

$("#Deed Transfer Gurantee's").hover(function(){
 $(this).append($('<li>@Html.ActionLink(@*whatever parameters you need*@)</li>'));
    });
 });
</script>
于 2012-06-12T19:39:35.173 回答