1

我希望菜单下有一个阴影，但在标题的顶部。问题是当悬停在菜单项上时，阴影会通过它显示出来。橙色部分应该只是实心并在阴影上方。

http://jsfiddle.net/WjcvH/2/

现在，我不能在菜单中添加 z-index，因为我必须向它添加一个位置，如果我这样做，下拉菜单会在 IE 中中断。由于我的下拉菜单是绝对定位的，除了从#menu 中删除位置/zindex 之外，我发现没有其他可能的解决方法。

HTML：

<div id="wrapper-header">
<header id="header" class="sk-container">           
    <nav id="menu" class="sixteen columns">
        <ul id="nav">
        <li class="current first"><a href="#">Home</a>
            <ul>
                <li><a href="#">drop 1</a>
                    <ul>
                        <li><a href="#">drop 2</a></li>
                        <li><a href="#">drop 2</a></li>
                    </ul>
                </li>
                <li><a href="#">drop 1</a></li>
            </ul>
        </li>
        <li><a href="#">Services</a></li>
        <li class="last"><a href="#">Contact Us</a></li>   
    </ul>        
    </nav>        
    <!-- End nav#menu -->

    <!-- start header image -->
    <div id="header-image-container" class="sixteen columns">
        <img src="https://dl.dropboxusercontent.com/u/6233413/pcontrol/menu-shadow.png" style="position: absolute; width: 98%;">
        <img id="siteMainDynHeaderImage1" src="https://dl.dropboxusercontent.com/u/6233413/pcontrol/header_image_1.jpg" >
    </div> 
    <!-- end header image -->

</header><!-- end header container -->

4

1 回答 1

1

您所要做的就是应用一个 z-index 值，高于上面的标题ul#nav li ul

像这样：

ul#nav li ul {
   z-index: 999;
}

您的菜单已设置为position: absolute，因此在这种情况下应用 z-index 将起作用。

工作示例：http: //jsfiddle.net/WjcvH/3/

于 2013-05-20T18:35:49.860 回答