0

我在这里遇到的真正简单的问题......一直试图让 an<li>的背景的子菜单出现在 the 后面，<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;}
4

4 回答 4

1

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

在此处查看演示

于 2013-11-01T19:04:08.167 回答
0

亲爱的朋友，这里是您问题的答案：“ 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;}
于 2013-11-01T19:47:35.577 回答
0

这应该给你一个想法：

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;
}
于 2013-11-01T18:40:06.870 回答
0

您需要设置background:redforreceipt而不是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;}

输出/输出

当您将鼠标悬停在文本上方的区域上时，TM-T88V将出现该按钮。

检查这个演示

于 2013-11-01T18:57:16.540 回答