html - Z 索引问题

Question

我在这里遇到的真正简单的问题...一直在尝试获取 <li> 的子菜单的背景出现在 <li> 后面但似乎无法弄清楚。

我尝试了一些东西，我知道我前几天遇到过，但出于某种原因，今天我就是想不通。

这是 fiddle : http://jsfiddle.net/F8BeF/尝试让红色背景显示在按钮后面。

代码如下:

HTML

<ul class="epsonNav">
    <li id="receipt"><a href="../epson/home.aspx"><span id="receiptDropDown" class="arrows"></span> </a>
           <ul id="receiptDropMenu">
                        <li>TM-T88V</li>
           </ul>
    </li>
</ul>

CSS

.epsonNav{position: relative; z-index:10}
.epsonNav li{margin-top: 5px; width: 154px; list-style: none;}
.epsonNav a{height: 43px; display: block;}

#receipt{background:url('https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png') -41px -373px;}
#receipt a:hover{background:url('https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png') -228px -373px;}
#receiptDropDown {display:block; height: 40px; width: 35px; left: 117px; position: absolute;}
#receiptDropMenu {position: relative; z-index: 1; background: red; padding-top:10px; margin-top: -10px;}

Answer 1

如果您只想让红色背景出现在当前图像后面，则将 #receiptDropMenu 的 z-index 设置为 -1 而不是 1。

参见 demo here