我有一个选项卡式菜单,看起来像这样:



的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">&nbsp;</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;
}

07-24 09:47
查看更多