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一些我的下拉菜单中正在扩大比自己大的内容，但它没有这样做直播）
我需要帮助使我的右下拉菜单与其父标签的右侧对齐。 （我知道我需要为此创建一个新班级，仅适用于最后一个选项卡;在这一点上，我们可以将所有选项卡与父母的右侧对齐，然后我可以将其取出并放入它变成一个新的类后）
我在寻找的东西这样的效果： 
我真的很感激任何见解的人可能对这个！谢谢！！
我知道我失去了一些东西简单 - 谢谢你！这工作完美！ –