Scrollbar with Dropdown

someone know how to make this dropdown get pass the

[overflow-x: auto;]

[overflow-x: auto;]

from this css

.navbar {
  width: 80%;
  padding: 0;
}

@media (max-width: 2000px) {
  .navbar {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: transparent transparent; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 30px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar {
  width: 80%;
  padding: 0;
}

@media (max-width: 2000px) {
  .navbar {
    scrollbar-width: thin; /* For Firefox */
    scrollbar-color: transparent transparent; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    overflow-x: auto;
    overflow-y: hidden;
  }
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 30px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

<li class="dropdown">
            <a class="nav-link scrollto " href="javascript:void(0)">MY ORDERS</a>
            <ul>
              <li>
                <a class="dropdown-item" href="{% url 'pers_lp_orders' %}">
                  Long Pay
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="{% url 'order_view_tag' %}">
                  Archives
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="{% url 'order_view_all' %}">
                  All Uploaded Orders
                </a>
              </li>
            </ul>
          </li>

<li class="dropdown">
            <a class="nav-link scrollto " href="javascript:void(0)">MY ORDERS</a>
            <ul>
              <li>
                <a class="dropdown-item" href="{% url 'pers_lp_orders' %}">
                  Long Pay
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="{% url 'order_view_tag' %}">
                  Archives
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="{% url 'order_view_all' %}">
                  All Uploaded Orders
                </a>
              </li>
            </ul>
          </li>

this was not my work and was passed to me so i'm having a hard time to make the dropdown appear in front of like confined container

1 Reply

clevermissfox•11mo ago

If I’m understanding the problem correctly, will need to be positioned absolute relative to outside the container that has the x-scrollbar if you want it to be visible outside of the container with the scrollbar. Depending on stacking context and containing blocks and what they are doing (eg if there is an opacity or transform or a position that would change the default). I think grid and flex change them too.

Gaming

Programming

Scrollbar with Dropdown