Dropdown menu - z-index stacking issue

Question

My team and I are having trouble stacking a Dropdown component on our page. Essentially, we want the Dropdown to slide down underneath the top-nav when the button is clicked, but as it slides down, it should be positioned above everything else: the sub-nav and the content below.

Currently, the Dropdown is positioned as absolute and the animation is performed with a transform: translateY() . We've tried positioning the elements outside of it as relative (the outer <ul> , <nav> , and <div id="top-nav"> elements that are bolded) with a higher z-index to ensure the dropdown stays below it, but so far it hasn't worked.

We're also not able to modify any of the CSS or structure of the div#content below, but we do have flexibility as to where we can place the Dropdown structurally in the #header.

EDIT: Tried my best to recreate the scenario with JSFiddle here: https://jsfiddle.net/4zaas4sq/

Here's roughly what our markdown looks like:

<body>
  <div id="header">
    <div>
      **<div id="top-nav">**
        <div>
          **<nav>**
            <ul></ul>
            **<ul>**
              <li>
                <DROPDOWN>
                  <button onClick={toggleDropdown}>Log In</button>
                  <div className={(this.state.show && 'show})>
                    <ul></ul>
                  </div>
                  ...
                </DROPDOWN>
              </li>
              <li></li>
            </ul>
          </nav>
        </div>
      </div>
      <div id="sub-nav">
        ...
      </div>
    </div>
  </div>
  <div id="content">

  </div>
</body>

Here's a wireframe depicting the final state of the dropdown.

最终下拉状态的线框

Any help or suggestions would be appreciated!

Answer 1

I used max-height property.I didn't change a lot of things in your code.In JS code you will see main changes.Let me know if this solution is what you want.Thanks :)

In html code add class="hideItem" in the divider with id="dropdown" like this:

<div id="dropdown" class="hideItem">

JS code

$(document).ready(function() {
$('#dropdown-button').click(function() {
    if( $("#dropdown").hasClass( 'hideItem' )){
        $( "#dropdown" ).css( 'max-height' , '100%' );
      $("#dropdown").removeClass( 'hideItem' );
      $("#dropdown").addClass( 'showItem' );
    }else{
        $( "#dropdown" ).css( 'max-height' , '0' );
      $("#dropdown").addClass( 'hideItem' );
      $("#dropdown").removeClass( 'showItem' );
    }
});
});

css code

html, body {
 height: 100%;
}

#top-nav {
  background-color: mediumpurple;
  width: 100%;
 }

.nav {
   display: flex;
   justify-content: space-between;
 }

 .inner-left-nav {
   list-style: none;
   display: flex;
 }

 .inner-left-nav li {
    padding: 5px;
    border: 1px solid black;
  }
  .inner-right-nav {
      display: flex;
      list-style: none;
      margin: 0;
  }

  .inner-right-nav li {
     align-items: center;
     padding: 0 5px;
  }

   .dropdown-container {
      display: flex;
      align-items: center;
      height: 100%;
    }

    #dropdown {
       position: absolute;
       top: 70px;
       right: 100px;
       max-height: 0;
       overflow-y: hidden;
       transition: max-height 1s ease-in-out;
       background-color: mediumseagreen;
    }

   #dropdown.show {
     visibility: visible;
     transform: translateY(0%);
     transition: visibility 0s, transform 0.3s;
    }

    #dropdown-button {
      border: 1px solid black;
      background: transparent;
      padding: 0 20px;
      cursor: pointer;
    }

   .dropdown-list {
      padding: 0;
      list-style: none;
   }
   #sub-nav {
      display: flex;
      justify-content: space-between;
      background-color: grey;
   }

   #content {
      background-color: azure;
      width: 100%;
      height: 100%;
   }

Dropdown menu - z-index stacking issue

Question

1 answers

solution1
0 2017-10-18 21:38:44

Dropdown menu - z-index stacking issue

Question

1 answers

solution1 0 2017-10-18 21:38:44

solution1
0 2017-10-18 21:38:44