Question

真正简单的问题我在这里......一直试图让<li>背景的子菜单显示在<li>后面，但似乎无法弄明白。

我尝试了一些事情，而且我知道前几天我已经拥有它，但由于某种原因，今天我无法理解它。

这是小提琴： 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

如果你想要做的就是让当前图片后面出现红色背景，那么将z-index的{{1}}设置为#receiptDropMenu而不是-1。

参见 demo here

Answer 2

这应该会给你一个想法：

<强> HTML

<div id="nav">
    <ul class="top-level">
        <li><a href="#"></a>
            <ul class="sub-level">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a></li>
            </ul>
        </li>
    </ul>
</div>

<强> CSS

ul.top-level {background:#FFFFFF;}
ul.top-level li {
 background:url('https://www.metsales.com/MetropolitanSales/microsite/epson/images/epson_buttons.png') -41px -373px;
    width: 154px;
}
#nav ul.sub-level {border:1px solid yellow;}
#nav a {
 color: #000000;
 cursor: pointer;
 display:block;
 height:25px;
 line-height: 25px;
 text-indent: 10px;
 text-decoration:none;
 width:100%;
}
#nav a:hover{
 text-decoration:underline;
}

#nav li:hover {
 position: relative;
}
ul.sub-level {
    display: none;  
}
li:hover .sub-level {
    background: #999;
    border: #fff solid;
    border-width: 1px;
    display: block;
    position: absolute;
    left: 75px;
    top: 5px;
}
ul.sub-level li {
    border: none;
    float:left;
    width:150px;
    background: red;
}

#nav .sub-level {
    background: #FFFFFF;
}

Answer 3

您需要为background:red而不是receipt设置receiptDropMenu。因此，您的代码应如下所示

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; background: red;}
#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; padding-top:10px; margin-top: -10px;}

O / P

当您将鼠标悬停在文字TM-T88V上方的区域上时，该按钮会显示。

选中 demo

Answer 4

以下是您亲爱的朋友的回答：“http://jsfiddle.net/F8BeF/5/”

HTML：

<ul class="epsonNav">
    <li ><a href="../epson/home.aspx" id="receipt"><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; position:relative; z-index:2}
#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: -30px;}

Z索引问题

4 个答案:

HTML

CSS

O / P