Question

我有一个可滚动的div，最大高度约为500px。在里面，是多个子div（部分），每个div都有一个菜单。菜单是典型的下拉菜单，如：

.menu ul li{
    position:relative;
    float:none;
    display:none; }

我面临的问题是，当菜单打开时，它会将所有内容都推下去。如果我将它定位为绝对位置，则会对稍后出现的部分（向下滚动后）感到困惑。

我应该通过javascript计算偏移量并以编程方式定位它们，还是可以通过CSS解决？

一种方法是拥有＆＃34;部分＆＃34;绝对的位置。然后我可以利用 position：relative 使菜单位于每个部分的正确位置。但由于其他原因，这是我无法做到的事情。

JSFiddle http://jsfiddle.net/iamjab/m66sgs5z/

任何帮助将不胜感激。

Answer 1

为position:relative添加了padding-top和stackplotwrap，并通过在position:absolute

的顶部填充区域中提供stackplotwrap来定位ul

＆＃13;

$(document).on('click', '.menu li', function () {
    $(this).find('ul li').css('display', 'block');
});
$(document).on('mouseleave', '.menu li', function () {
    $(this).find('li').css('display', 'none');
});

＆＃13;

.stackedPlotter {
  width: 100%;
  max-height: 300px;
}
.stackplotwrap {
  padding: 50px 0 0 0;
  position: relative;
}
.thiswrap {
  overflow-y: auto;
}
.menu {
  width: 100%;
  background: #eee;
  position: absolute;
  width: 100%;
  top: 0;
  padding: 0;
  margin: 10px 0;
}
.menu li {
  margin-right: 5px;
  float: left;
  list-style: none;
}
.menu li:hover {
  color: red;
}
.menu li ul li {
  display: none;
  float: none;
  position: relative;
}
.content {
  height: 200px;
  background: #ccc;
}
.clear {
  clear: both;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="stackedPlotter">
  <div class="thiswrap">
    <div class="stackplotwrap">
      <!-- SECTION 1 -->
      <ul class="menu">
        <li>Option 1
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
        <li>Option 2
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
    <div class="stackplotwrap">
      <!-- SECTION 2 -->
      <ul class="menu">
        <li>Option 1
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
        <li>Option 2
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
    <div class="stackplotwrap">
      <!-- SECTION 3 -->
      <ul class="menu">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
    <div class="stackplotwrap">
      <!-- SECTION 4 -->
      <ul class="menu">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
    <div class="stackplotwrap">
      <!-- SECTION 5 -->
      <ul class="menu">
        <li>Option 1</li>
        <li>Option 2</li>
        <li>Option 3
          <ul>
            <li>Opt 3-1</li>
            <li>Opt 3-2</li>
            <li>Opt3-3</li>
          </ul>
        </li>
      </ul>
      <div class="clear"></div>
      <div class="content">CONTENT</div>
    </div>
  </div>
</div>

＆＃13;

滚动div中的绝对定位下拉菜单

1 个答案: