Flexbox tabbed menu: right side dropdown cut off screen

Question

I've created a horizontal tabbed navigation using flexbox. Most tabs have an associated dropdown menu. For the right-side tabs, the dropdown menu shows up 1/2 off screen on smaller browser windows (but not so small as to flip to my mobile css).

My dropdown menus are currently left-side-aligned with their parent tab. I'd like my far right tab to be positioned so the right-side of the dropdown lines up with the right-side of the parent tab.

This dropdown is fine, since it's in the middle of the nav, and all the submenu items can be read:

This dropdown isn't readable because it's falling off the right-side of the screen:

/* tabbed nav container */

.main-navigation {
  z-index: 2;
  width: 100%;
}

ul {
  margin: 0;
  padding: 0;
}


/* sets tabbed menu as flex */

.menu {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}


/* sets bkgd color and no bullets on 1st level tabs */

.menu li {
  display: block;
  list-style-type: none;
  flex-grow: 1;
  background-color: #252525;
  border-right: 2px solid #454545;
  text-align: center;
}


/* sets color of links and padding on 1st level tabs */

.menu li a {
  display: flex;
  text-decoration: none;
  color: #888;
  padding: 10px 3px;
  justify-content: center;
}


/* sets color of hover on 1st level tabs */

.menu li:hover {
  background: #0a3156;
}

.menu li:hover a {
  color: #ffffff;
}


/* sets color of dropdown links */

.menu li:hover li a {
  color: #888;
}


/* sets color of dropdown link on hover */

.menu li:hover li a:hover {
  color: #ffffff;
}


/* sets active tab background */

.menu li.menu__tab--active {
  display: block;
  list-style-type: none;
  flex-grow: 1;
  background-color: #ffffff;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #fff;
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
}


/* sets active tab link color */

.menu li.menu__tab--active a {
  display: flex;
  text-align: center;
  text-decoration: none;
  color: #252525;
  padding: 10px 3px;
}


/* sets active tab "hover" */

.menu li.menu__tab--active a:hover {
  background-color: #ffffff;
  color: #252525;
}


/* sets styles for ACTIVE sub-nav menu on hover */

nav ul li.menu__tab--active:hover > ul li {
  border-top: 1px solid #454545;
  border-left: 1px solid #252525;
  border-bottom: 1px solid #252525;
}

nav ul li.menu__tab--active:hover > ul li a {
  display: flex;
  text-decoration: none;
  justify-content: flex-start;
  padding-left: 20px;
  padding-right: 20px;
}

nav ul li.menu__tab--active:hover > ul li a:hover {
  color: #252525 !important;
}


/* adds down arrow on menu items that have a dropdown */

.menu-item-has-children > a:after {
  font-family: 'FontAwesome';
  content: '\f107';
  padding-left: 5px;
  padding-top: 3px;
}


/* hides sub-nav menu */

nav ul ul {
  display: none;
  position: absolute;
  z-index: 99;
}


/* shows sub-nav menu on hover */

nav ul li:hover > ul {
  display: flex;
  flex-flow: column wrap;
  flex-shrink: 1;
  padding-left: 0;
}


/* sets styles for sub-nav menu on hover */

nav ul li:hover > ul li {
  border-top: 1px solid #454545;
}

nav ul li:hover > ul li a {
  display: flex;
  text-decoration: none;
  justify-content: flex-start;
  padding-left: 20px;
  padding-right: 20px;
}

<!-- START TABBED NAV -->
<div class="flex-container__row" style="width: 100%;">
  <div style="width: auto; flex-grow: 1;">
    <nav class="main-navigation">
      <ul class="menu">

        <li class="menu__tab--active menu-item-has-children"><a href="#">Absence</a>
          <ul class="sub-menu">
            <li><a href="#">Absence Hub</a></li>
            <li><a href="#">Admin Leave</a></li>
            <li><a href="#">Leave of Absence</a></li>
            <li><a href="#">Time Off Management</a></li>
          </ul>
        </li>
        <li><a href="#">Disability</a></li>
        <li class="menu-item-has-children"><a href="#">Development</a>
          <ul class="sub-menu">
            <li><a href="#">Probation/Evaluation</a></li>
            <li><a href="#">Training</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children"><a href="#">Performance</a>
          <ul class="sub-menu">
            <li><a href="#">Accidents</a></li>
            <li><a href="#">Commendations</a></li>
            <li><a href="#">Compliance</a></li>
            <li><a href="#">Customer Service</a></li>
            <li><a href="#">Discipline</a></li>
            <li><a href="#">Incidents</a></li>
            <li><a href="#">Rule Violations</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children"><a href="#">Labor Relations</a>
          <ul class="sub-menu">
            <li><a href="#">Arbitrations</a></li>
            <li><a href="#">Create LCA</a></li>
            <li><a href="#">Grievances</a></li>
            <li><a href="#">Lawsuits</a></li>
            <li><a href="#">Vet Preferences</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children"><a href="#">Equipment</a>
          <ul class="sub-menu">
            <li><a href="#">Critical Brake Relines</a></li>
            <li><a href="#">Preventative Maintenance Due</a></li>
            <li><a href="#">Pullout Late/Lost</a></li>
            <li><a href="#">Bulletins, Campaigns, Warranties</a></li>
            <li><a href="#">Transit Tech</a></li>
            <li><a href="#">Transportation (Bulletins, Route Info)</a></li>
            <li><a href="#">VD/VAP/Buses Unavailable</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children"><a href="#">Profile</a>
          <ul class="sub-menu">
            <li><a href="#">BI Reports</a></li>
            <li><a href="#">Daily Road Calls</a></li>
            <li><a href="#">Employment History</a></li>
            <li><a href="#">Employee Profile</a></li>
            <li><a href="#">Fleet Profile</a></li>
            <li><a href="#">KPI</a></li>
            <li><a href="#">OSHA Reports</a></li>
            <li><a href="#">Shelter Condition Profile</a></li>
            <li><a href="#">System/Garage</a></li>
            <li><a href="#">VD/VAP/Buses Unavailable</a></li>
            <li><a href="#">Work Record</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- end tabbed nav -->

I've dumped my HTML/CSS into jsfiddle: https://jsfiddle.net/h9ce606r/16/#&togetherjs=x9RvC3mQOn (I'm not sure why in my jsfiddle some of my dropdowns are expanding larger than their contents, but it's not doing that live.)

I need help making my right dropdown menu to align with the right side of its parent tab. (I know I'll need to make a new class for this to only apply to the last tab; at this point, we can just make all my tabs align with the right side of their parent, and I can strip it out and put it into a new class later.)

I'm looking for something to this effect:

I really appreciate any insight anyone might have on this! Thank you!!

Answer 1

You are not specifying the position of your dropdowns, so they all left align on default.

Put position: relative on .menu-item-has-children then absolute position the inner ul. Align them left on default but on the last one, position it to the right.

This will work for what you want.

.menu-item-has-children {
  position: relative;
}

.menu-item-has-children > ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
}

.menu-item-has-children:last-of-type > ul {
  right: 0;
  left: auto;
}

Answer 2

Set the top level li's to position: relative; then on the :last-child in the top level menu, set that .sub-menu to right: -2px; to align it with the right side of the parent.

/* tabbed nav container */

.main-navigation {
  z-index: 2;
  width: 100%;
}

ul {
  margin: 0;
  padding: 0;
}


/* sets tabbed menu as flex */

.menu {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
}


/* sets bkgd color and no bullets on 1st level tabs */

.menu li {
  display: block;
  list-style-type: none;
  flex-grow: 1;
  background-color: #252525;
  border-right: 2px solid #454545;
  text-align: center;
}


/* sets color of links and padding on 1st level tabs */

.menu li a {
  display: flex;
  text-decoration: none;
  color: #888;
  padding: 10px 3px;
  justify-content: center;
}


/* sets color of hover on 1st level tabs */

.menu li:hover {
  background: #0a3156;
}

.menu li:hover a {
  color: #ffffff;
}


/* sets color of dropdown links */

.menu li:hover li a {
  color: #888;
}


/* sets color of dropdown link on hover */

.menu li:hover li a:hover {
  color: #ffffff;
}


/* sets active tab background */

.menu li.menu__tab--active {
  display: block;
  list-style-type: none;
  flex-grow: 1;
  background-color: #ffffff;
  border-top: 1px solid #333;
  border-left: 1px solid #333;
  border-right: 1px solid #333;
  border-bottom: 1px solid #fff;
  border-top-left-radius: 5px 5px;
  border-top-right-radius: 5px 5px;
}


/* sets active tab link color */

.menu li.menu__tab--active a {
  display: flex;
  text-align: center;
  text-decoration: none;
  color: #252525;
  padding: 10px 3px;
}


/* sets active tab "hover" */

.menu li.menu__tab--active a:hover {
  background-color: #ffffff;
  color: #252525;
}


/* sets styles for ACTIVE sub-nav menu on hover */

nav ul li.menu__tab--active:hover > ul li {
  border-top: 1px solid #454545;
  border-left: 1px solid #252525;
  border-bottom: 1px solid #252525;
}

nav ul li.menu__tab--active:hover > ul li a {
  display: flex;
  text-decoration: none;
  justify-content: flex-start;
  padding-left: 20px;
  padding-right: 20px;
}

nav ul li.menu__tab--active:hover > ul li a:hover {
  color: #252525 !important;
}


/* adds down arrow on menu items that have a dropdown */

.menu-item-has-children > a:after {
  font-family: 'FontAwesome';
  content: '\f107';
  padding-left: 5px;
  padding-top: 3px;
}


/* hides sub-nav menu */

nav ul ul {
  display: none;
  position: absolute;
  z-index: 99;
}


/* shows sub-nav menu on hover */

nav ul li:hover > ul {
  display: flex;
  flex-flow: column wrap;
  flex-shrink: 1;
  padding-left: 0;
}


/* sets styles for sub-nav menu on hover */

nav ul li:hover > ul li {
  border-top: 1px solid #454545;
}

nav ul li:hover > ul li a {
  display: flex;
  text-decoration: none;
  justify-content: flex-start;
  padding-left: 20px;
  padding-right: 20px;
}

.menu > li {
  position: relative;
}
 
.menu > li:last-child .sub-menu {
  right: -2px;
}

<!-- START TABBED NAV -->
<div class="flex-container__row" style="width: 100%;">
  <div style="width: auto; flex-grow: 1;">
    <nav class="main-navigation">
      <ul class="menu">

        <li class="menu__tab--active menu-item-has-children"><a href="#">Absence</a>
          <ul class="sub-menu">
            <li><a href="#">Absence Hub</a></li>
            <li><a href="#">Admin Leave</a></li>
            <li><a href="#">Leave of Absence</a></li>
            <li><a href="#">Time Off Management</a></li>
          </ul>
        </li>
        <li><a href="#">Disability</a></li>
        <li class="menu-item-has-children"><a href="#">Development</a>
          <ul class="sub-menu">
            <li><a href="#">Probation/Evaluation</a></li>
            <li><a href="#">Training</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children"><a href="#">Performance</a>
          <ul class="sub-menu">
            <li><a href="#">Accidents</a></li>
            <li><a href="#">Commendations</a></li>
            <li><a href="#">Compliance</a></li>
            <li><a href="#">Customer Service</a></li>
            <li><a href="#">Discipline</a></li>
            <li><a href="#">Incidents</a></li>
            <li><a href="#">Rule Violations</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children"><a href="#">Labor Relations</a>
          <ul class="sub-menu">
            <li><a href="#">Arbitrations</a></li>
            <li><a href="#">Create LCA</a></li>
            <li><a href="#">Grievances</a></li>
            <li><a href="#">Lawsuits</a></li>
            <li><a href="#">Vet Preferences</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children"><a href="#">Equipment</a>
          <ul class="sub-menu">
            <li><a href="#">Critical Brake Relines</a></li>
            <li><a href="#">Preventative Maintenance Due</a></li>
            <li><a href="#">Pullout Late/Lost</a></li>
            <li><a href="#">Bulletins, Campaigns, Warranties</a></li>
            <li><a href="#">Transit Tech</a></li>
            <li><a href="#">Transportation (Bulletins, Route Info)</a></li>
            <li><a href="#">VD/VAP/Buses Unavailable</a></li>
          </ul>
        </li>
        <li class="menu-item-has-children"><a href="#">Profile</a>
          <ul class="sub-menu">
            <li><a href="#">BI Reports</a></li>
            <li><a href="#">Daily Road Calls</a></li>
            <li><a href="#">Employment History</a></li>
            <li><a href="#">Employee Profile</a></li>
            <li><a href="#">Fleet Profile</a></li>
            <li><a href="#">KPI</a></li>
            <li><a href="#">OSHA Reports</a></li>
            <li><a href="#">Shelter Condition Profile</a></li>
            <li><a href="#">System/Garage</a></li>
            <li><a href="#">VD/VAP/Buses Unavailable</a></li>
            <li><a href="#">Work Record</a></li>
          </ul>
        </li>
      </ul>
    </nav>
  </div>
</div>
<!-- end tabbed nav -->