我有一个选项卡式菜单,看起来像这样:
的HTML很简单:
<div id="menuContainer">
<ul id="menu" class="undecorated ">
<li id="menuHome"><%= Html.ActionLink<HomeController>(c=>c.Index(), "Home") %> </li>
<li id="menuAbout"><%= Html.ActionLink<UsergroupController>(c=>c.About(), "About") %> </li>
<li id="menuArchives"><%= Html.ActionLink<UsergroupController>(c=>c.Archives(), "Archives") %> </li>
<li id="menuLinks"><%= Html.ActionLink<UsergroupController>(c=>c.Links(), "Links") %> </li>
</ul>
<div id="menuBar" class="container"> </div>
</div>
和jQuery:
$(function() {
$('.container').corner();
$('ul#menu li').corner('30px top');
});
在每个页面上类似:
$(function() {
$('#menuHome').addClass('current')
})
我想指出“当前”选项卡,其后有一个阴影。我想我会这样做
用$('。current')。after('&nbsp')创建一个阴影'li'
使用CSS设置阴影颜色并使用jquery舍入右上角
用CSS位置将其移动:顶部:5px;左:-5px;
我遇到的问题是阴影出现在元素左侧的顶部。将其z-index设置得较低会使它由于某种原因完全消失。如何使其显示在上一个列表项的后面?
另外,有什么更好的方法呢?
最佳答案
将此样式应用于当前选项卡(不是阴影):
{
position: relative;
z-index:2;
}
而这到阴影
{
position: relative;
z-index:1;
}