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

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 >
  <div >
    <div >
      <button >Item A</button>
      <div >
        <div >
          <div >Item A1</div>
          <div >Item A2</div>
        </div>
      </div>
    </div>
    <div >
      <button >Item B</button>
      <div >
        <div >
          <div >Item B1</div>
          <div >Item B2</div>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

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 >
  <div >
    <div >
      <button >Item A</button>
      <div >
        <div >
          <div >Item A1 ...</div>
          <div >Item A2 ...</div>
        </div>
      </div>
    </div>
    <div >
      <button >Item B</button>
      <div >
        <div >
          <div >Item B1 ...</div>
          <div >Item B2 ...</div>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

.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.

CodePudding user response：

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 >
  <div >
    <div >
      <button >Item A</button>
      <div >
        <div >
          <div >Item A1</div>
          <div >Item A2</div>
        </div>
      </div>
    </div>
    <div >
      <button >Item B</button>
      <div >
        <div >
          <div >Item B1</div>
          <div >Item B2</div>
        </div>
      </div>
    </div>
  </div>
</div>