1
我使用flexbox創建了水平選項卡式導航。大多數標籤都有一個關聯的下拉菜單。對於右側選項卡，下拉菜單在較小的瀏覽器窗口中顯示1/2屏幕（但不會太小以至於不能移動到我的移動css）。Flexbox選項卡式菜單：右側下拉切斷屏幕
我的下拉菜單當前與其父標籤左對齊。我希望我的最右邊的選項卡被定位，使得右側的下拉列表與父標籤的右側對齊。
此下拉是好的，因爲它是在導航的中間，和所有的子菜單項可以讀取：
此下拉不可讀，因爲它脫落右側 
/* 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 -->我甩了我的HTML/CSS到的jsfiddle：https://jsfiddle.net/h9ce606r/16/#&togetherjs=x9RvC3mQOn （我不知道爲什麼在我的jsfiddle一些我的下拉菜單中正在擴大比自己大的內容，但它沒有這樣做直播）
我需要幫助使我的右下拉菜單與其父標籤的右側對齊。 （我知道我需要爲此創建一個新班級，僅適用於最後一個選項卡;在這一點上，我們可以將所有選項卡與父母的右側對齊，然後我可以將其取出並放入它變成一個新的類後）
我在尋找的東西這樣的效果： 
我真的很感激任何見解的人可能對這個！謝謝！！
我知道我失去了一些東西簡單 - 謝謝你！這工作完美！ –