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

holdmydev 0
Viewed 38

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>

css html
3 Answers

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>

BehRouz0 
.nav-item {
  position: relative;
}

.dropdown-menu {
  left: -100%;
}

If you set the parent with a position: relative; and the dropdown left: -100%, you'll get the desired effect.

offoffoff0

Use relative positioning on the nav-item and the right property on the absolutely positioned dropdown-menu. In your case, right: 4px to take into account the padding on nav-item. You might consider using e.g. margins on the buttons instead, then you could just set right: 0. You could also use a CSS variable so you don't have to keep track of the values in different places.

(Note: I removed all non-necessary CSS and added justify-content on the flex container to align the nav items to the right. Also added white-space: nowrap to the dropdown items to prevent line breaks.)

.nav {
  display: flex;
  justify-content: flex-end;
}

.nav-item {
  position: relative;
  padding-left: 4px;
  padding-right: 4px;
}

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

.dropdown {
  display: none;
}

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

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

.dropdown-item {
  white-space: nowrap;
}
<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>

tobiv0
Related