1

I have a scrollable div of max height around 500px. Inside, are multiple child divs (sections) that have a menu on each of them. The menu are typical dropdowns, something like:

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

The problem I am facing is that when menu opens, it pushes everything down. If I make it position absolute, it messes up for sections that come later down (after scrolling down).

Should I compute offsets by javascript and position them programatically, or can this be resolved via CSS?

One way would be to have the "sections" position absolute. Then I can leverage position: relative for the menus to be at the right place in each section. But that is something I can't do due to other reasons.

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

Any help will be appreciated.

2

1 Answer 1

0

added position:relative and padding-top for stackplotwrap and positioned ul by giving position:absolute in the top padding area of stackplotwrap

$(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');
});
.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;
}
<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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.