css - 垂直列表子菜单定位问题

Question

我有一个垂直的图像列表，悬停时它会显示一个包含 3-5 个图像的子菜单，这些图像链接到其他页面。一切都很好，工作正常；但是，如果我滚动页面顶部以外的任何位置并将鼠标悬停在列表项上，那么子菜单列表项不会像我不应该的那样直接平行于主列表滚动并最初将鼠标悬停在列表上，子菜单直接显示在列表中父项的旁边。这只是一个 css 列表。

当我向下滚动时，我有两张好风景和坏风景的图片。

有什么想法吗？谢谢!

工作屏幕截图，页面未滚动

屏幕截图无效，页面滚动

HTML

<div id="navcontainer">
<ul>
<li><img src="graphics/nav_main_data_files.jpg" alt="">
     <ul class="nested">
         <li><a href="datauploaddatafiles.aspx"><img src="graphics/nav_sub_upload_data_file.jpg" alt=""></a></li>
         <li><a href="datarequestsamples.aspx"><img src="graphics/nav_sub_request_samples.jpg" alt=""></a></li>
         <li><a href="dataapprovesamples.aspx"><img src="graphics/nav_sub_approve_samples_data.jpg" alt=""></a></li>
     </ul>
         <li><img src="graphics/nav_main_job_tracking.jpg" alt="">
     <ul class="nested">
         <li><a href="jobtrackingschedule.aspx"> <img src="graphics/nav_sub_schedule_job.jpg" alt=""></a></li>
         <li><a href="jobtrackingsviewstatus.aspx"><img src="graphics/nav_sub_view_job_status.jpg" alt=""></a></li>
         <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="graphics/nav_sub_review_prod_totals.jpg" alt=""></a></li>
    </ul>
</li>
</ul>
</div>

CSS

 #navcontainer ul { list-style-type: none; }

.nested
 {
     display: none;
     list-style: none;
}
li:hover > .nested
 {
    display: inline-block;
    position: fixed;
    padding-left: .5em;

}​

检查 http://jsfiddle.net/JVKLw/3/

Answer 1

使用相对和绝对定位而不是固定的(这是问题所在)。

示例

HTML

<div id="navcontainer">
<ul>
     <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="datauploaddatafiles.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="datarequestsamples.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="dataapprovesamples.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
      </li>
          <li><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt="">
      <ul class="nested">
           <li><a href="jobtrackingschedule.aspx"> <img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsviewstatus.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
           <li><a href="jobtrackingsreviewproductiontotals.aspx"><img src="http://www.incrementp.co.jp/ml/en/common/image/menu01_on.gif" alt=""></a></li>
      </ul>
    </li>
</ul>
</div>​

CSS

 #navcontainer ul { list-style-type: none; }

.nested
 {
     display: none;
     list-style: none;
}
ul li{
    position: relative;
}
li:hover > .nested
 {
    display: block;
    position: absolute;
    left: 210px;
    top: 0;
}​