How to align a dropdown menu in CSS

Question

I'm having some trouble aligning my dropdown menu in my angular app.

Please see the screenshot attached. The menu extends too far right of the screen. I need it to align to the "top right" of the ellipses instead of the "top left" as it is currently. The menu is currently functioning in a table.

Any assistance in getting the menu to shift to the left would be greatly appreciated.

Here is the HTML/CSS: 
              <td class="dropup">
                <div class="dropup">
                  <button style="background-color: white;" class="dropbtn">
                    <img class="icon" src="assets/ellipsis.png">
                  </button>
                  <div class="dropup-content">
                    <a href="#">Admin Functionality</a>
                    <a href="#" (click)="downloadBucket(j._id)"> Download Project Snapshot</a>
                    <a [routerLink]="['/project/'+j._id+'/project-activity']">View Project Activity</a>
                    <a href="#">Archive Project</a>
                    <a *ngIf="j.creatorid != user._id" (click)="onLeaveProjectClick(j._id, j.projectname, n)">Leave Project</a>
                  </div>
                </div>
              </td>

    .dropbtn {
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
}
.dropup {
  position: relative; 
  display: inline-block;
  float:right;
}
.dropup-content {
  display: none;
  position: absolute;
  transform-origin: 60% 40%;
  top: 20px;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  border-radius: 10px;
}
.dropup-content :hover {
  border-radius: 10px;
}
.dropup-content a {
  color: black;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
}
.dropup-content a:hover {
  background-color: #ddd;
  color: #00aca8 !important;
}
.dropup:hover .dropup-content {
  display: block;
  border-radius: 10px;
}

Andreas Schantl · Accepted Answer · 2018-08-21 19:13:39Z

1

As you set .dropup-content to absolute, it will be left aligned relative to .dropup as .dropup-content is within .dropup. But as your class is already absolute, simply add:

right: 0; left: auto; // Unsure if you really need this though

to .dropup-content. This will take care that the class is right aligned relative to .dropup.

answered Aug 21, 2018 at 19:13

Andreas Schantl

1311 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Raul · Accepted Answer · 2018-08-21 19:32:09Z

1

add to class .dropup-content this:

  right:0;

https://jsfiddle.net/b1stpfr4/2/

edited Aug 21, 2018 at 19:32

answered Aug 21, 2018 at 19:04

Raul

1,0342 gold badges13 silver badges32 bronze badges

Collectives™ on Stack Overflow

How to align a dropdown menu in CSS

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related