Jquery 如何在表格中重叠背景图像

我使用jquery在悬停时显示列表，但当我这样做时，列表隐藏在下面显示日期的图像后面。建议plz

<style type="text/css">    
.calendar_date                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 15px; color : #222222; }
a.calendar_date                    { color: #0000aa; text-decoration: none; }
a.calendar_date:hover            { color: #000080; text-decoration: underline; }

//.calendar_navigation            { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 14px; color : #222222; }
//a.calendar_navigation            { color: #0000aa; text-decoration: none; }
//a.calendar_navigation:hover        { color: #000080; text-decoration: underline; }


.calendar_day                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 12px; color : #222222; }
a.calendar_day                    { color: #0000aa; text-decoration: none; }
a.calendar_day:hover            { color: #000080; text-decoration: underline; }

.calendar_date_number            { font-family : Cursive,menu, Arial, Helvetica, sans-serif,solid,bold; float:left; margin-left : 10px; color : #222222; }
a.calendar_date_number            { color: #0000aa; text-decoration: none; }
a.calendar_date_number:hover    { color: #000080; text-decoration: underline; }

.calendar_date_small                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 12px; color : #222222;  }
a.calendar_date_small                    { color: #0000aa; text-decoration: none; }
a.calendar_date_small:hover            { color: #000080; text-decoration: underline; }

.calendar_navigation_small            { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 12px; color : #222222; }
a.calendar_navigation_small            { color: #0000aa; text-decoration: none; }
a.calendar_navigation_small:hover        { color: #000080; text-decoration: underline; }

.calendar_day_small                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #222222; }
a.calendar_day_small                    { color: #0000aa; text-decoration: none; }
a.calendar_day_small:hover            { color: #000080; text-decoration: underline; }

.calendar_date_number_small            { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 9px; color : #222222; }
a.calendar_date_number_small            { color: #0000aa; text-decoration: none; }
a.calendar_date_number_small:hover    { color: #000080; text-decoration: underline; }

//table.rounded td         { -moz-border-radius: 10px 10px 10px 10px; }
table.rounded5 td         { -moz-border-radius: 10px 10px 10px 10px; }
//table.notrounded td         { -moz-border-radius: 0px 0px 0px 0px; }
table.rounded5     {background:url(images/bg.jpg) no-repeat; height:300px;}
.dates_table     {background:url(images/box.jpg) no-repeat; height:45px; position:relative;}


.blank_day         {background:url(images/simple_box.jpg) no-repeat; height:45px}
//table.td.rounded5{background:url(images/box.jpg) no-repeat;}
.text                    { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 13px; color : #222222; }
a.text                    { color: #0000aa; text-decoration: none; }
a.text:hover            { color: #222222; text-decoration: underline; }

td.calendar_entry_full {background:url("no.png") no-repeat center; color:#222222; }
.dropdown_list             {list-style: none; float:left; padding:0px;}                            



td#drop {
    //font-size: 1.2em;

    //background: url(../images/box.jpg) no-repeat;
}
td#drop ul li a:hover{
    /*background: url(topnav_hover.gif) no-repeat center top;*/
}
td#drop span#drop { /*--Drop down trigger styles--*/
    width: 10px;
    height: 5px;
    float: left;
    background: url(jquery%20example/dropdown_linkbg.gif) no-repeat center top;
}
td#drop span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
td#drop ul.subnav {
    list-style: none;
    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    background: #FFF;
    margin: -5px 0px 0px -4px; padding: 0;
    display: none;
    float: left;
    width: 107px;
    border: 2px groove #CAD7F9;
    border-radius:0px 0px 10px 10px;

}
td#drop ul.subnav li{
    margin: 0; padding: 0;
    //border-top: 1px solid #252525; /*--Create bevel effect--*/
    //border-bottom: 1px solid #444; /*--Create bevel effect--*/
    clear: both;
    border:1px solid #CAD7F9;
    border-bottom:none;
}
html td#drop ul.subnav li a {
    float: left;
    color:#000;
    text-decoration:none;
    background:center #FFF;
    padding-left: 30px;

}
html td#drop ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    background:center #FFF;
    display:block;
    }

</style>

---

您可以不使用jQuery而只使用CSS来实现这一点。我使用的是背景色，但图像会有相同的效果

演示：

这是我在没有看到您的代码的情况下所能做的最好的。另一种选择是，如果您想强制一个元素（如列表）出现在另一个元素的上方，请尝试将此CSS添加到您的元素中

#yourlist {
    position: relative;
    z-index: 10; /* you can set this higher if needed */
}

---

显示一些代码，我们将帮助您修复iti。很抱歉，伙计们，我无法发布jquery脚本，因为我的声望很低。谢谢wdm@sir我可以用main{background image}代替颜色吗？@chetan是的，你可以用main{background image:urlpath/to/img.jpg；}@wdm我在日历中使用了按钮图像，显示日期。我试图做的是，当有人单击此按钮时，将出现一个下拉列表，其中我将显示约会的时间段，但先生，当我这样做时，下拉列表将显示在图像后面。我尝试了不同的属性，如不透明度可见性，但可以修复它：-|@wdm我试过了，长官，但不知道是怎么回事，当背景图像是绝对的，下拉列表出现在它后面，当我将背景图像设置为相对时，下面的图像块会根据列表的长度向下移动，你能给我一些演示，或者你知道我哪里出了问题…嗯，你喜欢oracle网站有下拉列表，它的内容重叠

#main {
    background-color: #ccc;    
}
#main ul {
    visibility: hidden;
    padding: 15px;
}
#main:hover ul {
    visibility: visible;
}

#yourlist {
    position: relative;
    z-index: 10; /* you can set this higher if needed */
}