Ich habe eine horizontale Tabbed-Navigation mit flexbox erstellt. Die meisten Registerkarten haben ein zugeordnetes Dropdown-Menü. Für die Registerkarten auf der rechten Seite zeigt das Dropdown-Menü in kleineren Browserfenstern den halben Bildschirm (aber nicht so klein, dass es auf mein mobiles CSS gewendet werden kann).Flexbox-Registerkartenmenü: rechte Seite Dropdown-Anzeige
Meine Dropdown-Menüs sind derzeit linksseitig mit ihrer übergeordneten Registerkarte ausgerichtet. Ich möchte, dass die rechte Registerkarte so positioniert wird, dass die rechte Seite der Dropdown-Liste mit der rechten Seite der übergeordneten Registerkarte übereinstimmt.
Dieser Drop-Down ist in Ordnung, da es in der Mitte des nav ist und alle Menüpunkte gelesen werden können:
Dieser Drop-Down nicht lesbar ist, weil es die rechte Seite herunterfallen ist des Bildschirms: 
/* 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 -->ich meine HTML/CSS in jsfiddle abgeladen haben: https://jsfiddle.net/h9ce606r/16/#&togetherjs=x9RvC3mQOn (. Ich bin nicht sicher, warum in meinem jsfiddle einige meiner Dropdown-Listen erweitern größer als ihr Inhalt, aber es tut nicht live)
Ich brauche Hilfe, um mein rechtes Dropdown-Menü mit der rechten Seite der übergeordneten Registerkarte auszurichten. (Ich weiß, dass ich dafür eine neue Klasse erstellen muss, die nur auf die letzte Registerkarte angewendet wird. An dieser Stelle können wir einfach alle meine Registerkarten mit der rechten Seite ihrer Eltern ausrichten, und ich kann sie ausziehen und setzen es in eine neue Klasse später)
ich bin auf der Suche nach etwas zu diesem Effekt. 
ich schätze wirklich jede Einsicht jemand auf diese haben könnte! Vielen Dank!!
Ich wusste, dass ich etwas einfach fehlte - Vielen Dank! Das hat perfekt funktioniert! –