垂直列表子菜单定位问题

时间：2012-09-04 19:11:43

标签： css list

我有一个垂直的图像列表，并在悬停时显示另外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/

1 个答案:

答案 0 :(得分：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;
}​
相关问题
最新问题