Home How to make dropdown menu expand to the left instead of to the right of the parent item?

Questions

How to make dropdown menu expand to the left instead of to the right of the parent item?

September 9, 2022

Currently, the dropdown is left aligned of the parent item text. This is fine if the menu bar starts on the left side of the screen. However, my menu bar starts on the right side, so text gets cut off the screen. How can I make the dropdown menu align to the right of the parent item and expand left of it?

It should drop down like this:

    itemA    itemB
---------
|       |
---------

.nav-section {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
}

.nav {
  display: flex;
  height: 100%;
  position: static;
  width: 100%;
  z-index: 9999;
}

.nav-item {
  padding-left: 4px;
  padding-right: 4px;
  position: static;
  text-align: right;
  width: auto;
}

.button-item {
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.dropdown {
  display: none;
}

.nav-item:hover .dropdown {
  display: block;
}

.dropdown-menu {
  border: solid 1px red;
  padding: 2px;
  position: absolute;
}

<div class="nav-section">
  <div class="nav">
    <div class="nav-item">
      <button class="button-item">Item A</button>
      <div class="dropdown">
        <div class="dropdown-menu">
          <div class="dropdown-item">Item A1</div>
          <div class="dropdown-item">Item A2</div>
        </div>
      </div>
    </div>
    <div class="nav-item">
      <button class="button-item">Item B</button>
      <div class="dropdown">
        <div class="dropdown-menu">
          <div class="dropdown-item">Item B1</div>
          <div class="dropdown-item">Item B2</div>
        </div>
      </div>
    </div>
  </div>
</div>

>Solution :

All you need to do is to add direction for the navigation element:

rtl for right-to-left

.nav {
  direction:rtl;
}

and then reset the direction to left-to-right ltr for the children, if the content is in a left to right written language:


.dropdown-menu {
  direction:ltr;
}

.nav-section {
  margin-left: auto;
  margin-right: auto;
  max-width: 1440px;
}

.nav {
  display: flex;
  height: 100%;
  position: static;
  width: 100%;
  z-index: 9999;
  direction:rtl;
}

.nav-item {
  padding-left: 4px;
  padding-right: 4px;
  position: static;
  text-align: right;
  width: auto;
}

.button-item {
  padding-bottom: 2rem;
  padding-top: 2rem;
}

.dropdown {
  display: none;
}

.nav-item:hover .dropdown {
  display: block;
}

.dropdown-menu {
    direction:ltr;
  border: solid 1px red;
  padding: 2px;
  position: absolute;
}

<div class="nav-section">
  <div class="nav">
    <div class="nav-item">
      <button class="button-item">Item A</button>
      <div class="dropdown">
        <div class="dropdown-menu">
          <div class="dropdown-item">Item A1 ...</div>
          <div class="dropdown-item">Item A2 ...</div>
        </div>
      </div>
    </div>
    <div class="nav-item">
      <button class="button-item">Item B</button>
      <div class="dropdown">
        <div class="dropdown-menu">
          <div class="dropdown-item">Item B1 ...</div>
          <div class="dropdown-item">Item B2 ...</div>
        </div>
      </div>
    </div>
  </div>
</div>