css - Flexbox 选项卡式菜单 : right side dropdown cut off screen

Question

我使用 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 中，我的一些下拉菜单扩展得比它们的内容大，但它并没有这样做。)

我需要帮助使我的右侧下拉菜单与其父选项卡的右侧对齐。 (我知道我需要为此创建一个新类以仅适用于最后一个选项卡；此时，我们可以将所有选项卡与父项的右侧对齐，然后我可以将其剥离并放入稍后进入一个新类(class)。)

我正在寻找这种效果的东西:


我真的很感激任何人可能对此有任何见解!谢谢!!

Answer 1

您没有指定下拉列表的位置，因此它们都默认左对齐。

把 position: relative在 .menu-item-has-children然后绝对位置内部ul。默认情况下将它们左对齐，但在最后一个上，将其放置在右侧。

这将适用于您想要的。

.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;
}