jquery - DIV 位置不正确

Question

我有以下 HTML 代码:

<div style="width: 960px; margin: 0; padding: 0;">
  <table border=1 cellPadding=0 cellSpacing=0 width=960>
    <tr>
       <td width=720 height=300>
         <div id="slider1">
            <ul id="slider1Content">
               <li class="slider1Image">
                 <a href=""><img src="theImages/1.jpg" alt="1" /></a>
                 <span class="left"><strong>Title text 1</strong><br />Content text...</span>
               </li>
               <li class="slider1Image">
                 <a href=""><img src="theImages/2.jpg" alt="2" /></a>
                 <span class="left"><strong>Title text 2</strong><br />Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...Content text...</span>
               </li>
               <li class="slider1Image">
                 <img src="theImages/3.jpg" alt="3" />
                 <span class="left"><strong>Title text 2</strong><br />Content text...</span>
               </li>
               <li class="slider1Image">
                 <img src="theImages/4.jpg" alt="4" />
                 <span class="left"><strong>Title text 2</strong><br />Content text...</span>
              </li>
              <li class="slider1Image">
                 <img src="theImages/5.jpg" alt="5" />
                 <span class="left"><strong>Title text 2</strong><br />Content text...</span>
              </li>
              <div class="clear slider1Image"></div>
           </ul>
        </div>
      </td>
      <td width=240>fghfhg</td>
    </tr>
  </table>
</div>

以及以下 CSS:

#slider1 {
    width: 720px; /* important to be same as image width */
    height: 300px; /* important to be same as image height */
    position: relative; /* important */
    overflow: hidden; /* important */
}

#slider1Content {
    width: 720px; /* important to be same as image width or wider */
    position: absolute;
    top: 0;
    margin-left: 0;
}
.slider1Image {
    float: left;
    position: relative;
    display: none;
}

.slider1Image span {
    position: absolute;
    font: 10px/15px Verdana, Arial, Helvetica, sans-serif;
    padding: 10px 13px;
    width: 694px;
    background-color: #FFFFFF;
    filter: alpha(opacity=90);
    -moz-opacity: 0.9;
    -khtml-opacity: 0.9;
    opacity: 0.7;
    color: #000000;
    display: none;
}
.clear {
    clear: both;
}
.slider1Image span strong {
    font-size: 14px;
}
.top {
    top: 0;
    left: 0;
}
.bottom {
    bottom: 0;
    left: 0;
}
.left {
    top: 0;
    left: 0;
    width: 125px !important;
    height: 280px;
}
.right {
    right: 0;
    bottom: 0;
    width: 90px !important;
    height: 290px;
}
ul { list-style-type: none;}

我有两个问题:

1. 图像带有缩进，而不是从框的开头开始。
2. 鼠标悬停时菜单位于图像下方。

Here's a picture

如何修复这些错误？

Answer 1

将 z-index 设置为下拉菜单。

http://www.w3.org/wiki/CSS/Properties/z-index