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;
}

垂直列表子菜单定位问题

1 个答案: