我有一个像这样水平显示的导航菜单。
<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悬停时显示另一个操作链接。我还没有找到一个明显的例子。提前感谢任何帮助!
查看此 jquery 示例。您所要做的就是将" <span> ***</span>
"替换为超链接
这可能
有所帮助:
$("#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%;}
我认为这可以完成工作。
我认为使用新的 li 标签会给你一个下拉菜单,而不是在线 jquery 示例中的"滑出"。这基本上是大黄蜂的答案。
<script>
$(document).ready(function(){
$("#Deed Transfer Gurantee's").hover(function(){
$(this).append($('<li>@Html.ActionLink(@*whatever parameters you need*@)</li>'));
});
});
</script>