How to keep a dropdown from moving elements

[Michelle_S]

Hello there,

I have a dropdown list that I want to keep from moving elements as I hover over it.

The Striped Phoenix – Store

When I hover over a category item, the container below moves as the drop-down descends. I want the container to stay at the same spot.

What is the best solution for this? Appreciate the help.

Edit: here’s the HTML and CSS code for this:

<div class="menu js-top-menu position-static hidden-sm-down" id="_desktop_top_menu">
    
          <ul class="top-menu" id="top-menu" data-depth="0">
                    <li class="category" id="category-16">
                          <a class="dropdown-item" href="http://thestripedphoenix.com/store/index.php?id_category=16&amp;controller=category" data-depth="0">
                                                                      <span class="float-xs-right hidden-md-up">
                    <span data-target="#top_sub_menu_90236" data-toggle="collapse" class="navbar-toggler collapse-icons">
                      <i class="material-icons add"></i>
                      <i class="material-icons remove"></i>
                    </span>
                  </span>
                                Nature Photography
              </a>
                            <div class="popover sub-menu js-sub-menu collapse" id="top_sub_menu_90236">
                
          <ul class="top-menu" data-depth="1">
                    <li class="category" id="category-17">
                          <a class="dropdown-item dropdown-submenu" href="http://thestripedphoenix.com/store/index.php?id_category=17&amp;controller=category" data-depth="1">
                                Flowers
              </a>
                          </li>
                    <li class="category" id="category-18">
                          <a class="dropdown-item dropdown-submenu" href="http://thestripedphoenix.com/store/index.php?id_category=18&amp;controller=category" data-depth="1">
                                Ground
              </a>
                          </li>
              </ul>
    
              </div>
                          </li>
                    <li class="category" id="category-11">
                          <a class="dropdown-item" href="http://thestripedphoenix.com/store/index.php?id_category=11&amp;controller=category" data-depth="0">
                                Architecture Photography
              </a>
                          </li>
              </ul>
    
    <div class="clearfix"></div>
</div>

#_desktop_top_menu {
    text-transform: uppercase;
    font-weight: 1em;
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
    }

#_desktop_top_menu a {
    -o-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    -moz-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    -webkit-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    -ms-transition: color 0.2s ease, border-bottom-color 0.2s ease;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    color: #232323;
    text-decoration: none;
}

#_desktop_top_menu ul {
    display: flex;
}

ul#top-menu {
    position: absolute;
    z-index: 99999;
    }
    
.dropdown-item {
    display: block;
    width: 100%;
    clear: both;
    text-align: inherit;
    white-space: nowrap;
    background: none;
    border: 0;
    position: relative;
}

.top-menu .sub-menu.collapse {
    display: none;
}

.top-menu .popover {
    max-width: inherit;
    border-radius: 0;
    positon: initial;
}

.top-menu .sub-menu {
    box-shadow: 2px 1px 11px 2px rgba(0,0,0,.1);
    border: none;
    margin-left: .9375rem;
    width: calc(100% - 30px);
    min-width: calc(100% - 30px);
    z-index: 18;
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    display: block;
    max-width: 276px;
    padding: 1px;
    font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    font-size: .875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3rem;
}

[miku86]

Hey Michelle,

would be great to see your code.

You’re using display: none, that removes the element from the normal flow.
A viable solution is overlaying the other content instead of re-adding the dropdown into the normal flow.

[happyworld]

put position:absolute on your dropdown content so it doesn’t disturb the normal flow.

[Michelle_S]

Hi Miku, I just added the code to my original post. I’m editing over the Prestashop e-commerce CMS so I’ve done a lot of trial/error working with the code. However, I was able to pinpoint where the issue may be. I’ve added this CSS code:

ul#top-menu {
    position: absolute;
    z-index: 99999;
    }

However, when I hover over “Nature Photography” the dropdown still moves the “Architecture Photography” next to it as seen in this example:

[Michelle_S]

Hey happyworld, I believe I have tried this method with the dropdown, but it’ll only cause the list to disappear. Except for that box shown in the gif on the reply to Miku’s post.

[happyworld]

you probably forgot to put position:relative to your parent element.

//parent
<li style="position:relative">
//dropdown
<div style="position:absolute">
</div>
</li>

Again the reason why it moves everything is because the element that appears disrupts the natural flow of the document, to accomodate for the newly added element to the dom(the dropdown), it has to move other elements. You made it work for the bottom elements to not move by applying z-index to your dropdown.

[Michelle_S]

Hmm, getting closer there… what kind of method should I use if I have a list that’s being overlapped because of the position:absolute selector?

[happyworld]

what do you mean by that?

[Michelle_S]

I’m sorry, I should be more clear in the last post (it was late at that time, haha).

If you notice on the dropdown under “Nature Photography”, the text is overlapping when I use position: absolute on the code highlighted in red. What would be the best solution to that?

[Michelle_S]

Does anyone else have a solution to the text overlapping on position: absolute?