【发布时间】：2017-02-02 23:07:11
【问题描述】：
我使用 flexbox 创建了一个水平选项卡式导航。大多数选项卡都有关联的下拉菜单。对于右侧选项卡，下拉菜单在较小的浏览器窗口上显示 1/2 屏幕外（但不会小到翻转到我的移动 CSS）。
我的下拉菜单目前与其父选项卡左侧对齐。我希望将最右侧的选项卡放置在下拉列表的右侧与父选项卡的右侧对齐。
这个下拉菜单很好，因为它在导航的中间，所有的子菜单项都可以阅读：
/* 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 中，我的一些下拉菜单的扩展比它们的内容大，但它并没有这样做。）
我需要帮助使我的右侧下拉菜单与其父选项卡的右侧对齐。 （我知道我需要为此创建一个新类以仅适用于最后一个选项卡；此时，我们可以让我的所有选项卡与其父选项卡的右侧对齐，我可以将其剥离并放置稍后将其放入一个新类中。）
我非常感谢任何人对此的任何见解！谢谢！！
【问题讨论】：
标签： css drop-down-menu tabs navigation flexbox