Question

我制作了一个带有子孩子的菜单栏，我试图将子孩子放在菜单栏下面，就像不用于定位的层一样。我认为问题是我的菜单栏有一个背景图片，我不能把它的孩子放在那个下面。这有解决方法吗？谢谢，我在下面添加了一些代码

ul#mainNav {
    padding: 0;
    margin: 0;
    position: relative;
    width: 980px;
    background: transparent url(images/mainNavbar.png) no-repeat top center;
    margin: 0 auto;
    float: left;
    z-index: 100;
}
ul#mainNav li {
    list-style: none;
    margin: 0 25px;
    display: inline;
    height: 40px;
    line-height: 40px;
    position: relative;
}
  ul#mainNav ul {
display: block;
list-style: none;
font-size: 100%;
cursor: default;
position: absolute;
width: 160px;
z-index: -1;
background-color: #c32c19;
-moz-box-shadow: #000 1px 1px .4em;
-webkit-box-shadow: #000 1px 1px .3em;
-o-box-shadow: #000 1px 1px .4em;
}

链接如下：

http://jsfiddle.net/s96Eh/1/

Answer 1

感谢您的澄清..这是一个更新的JSfiddle

它在IE7中不起作用，但这是堆叠顺序的hasLayout问题，我不确定它是否“可修复”但是它只是意味着它仍然出现在上面

ooops ..忘记了，将鼠标悬停在“家庭”这个词上我放入了CSS悬停切换

将菜单栏的子项放在背景图像下面的背景图像中

1 个答案: