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中，我的一些下拉列表的扩展范围大于它们的内容，但它并没有这样做。）

我需要帮助使我的右下拉菜单与其父标签的右侧对齐。（我知道我需要为此创建一个新类，仅适用于最后一个选项卡;此时，我们可以让所有选项卡与其父项的右侧对齐，我可以将其删除并放入它稍后会进入一个新的课程。）

我正在寻找这样的效果：

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

Answer 1

将顶级li设置为position: relative;，然后在顶级菜单中的:last-child上，将.sub-menu设置为right: -2px;以对齐它与父母的右侧。

/* 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;
}

.menu > li {
  position: relative;
}
 
.menu > li:last-child .sub-menu {
  right: -2px;
}

<!-- 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 -->

Answer 2

您没有指定下拉列表的位置，因此它们在默认情况下都保持对齐状态。

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

Answer 3

我创建了配置文件子菜单类并将其重命名为子菜单4，并为其指定了margin:0 10px 0 400px。我还删除了position: absolute;

＆＃13;

/* 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;
}
.menu > li {
  posi
}
/* 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;
}
.submenu {
  position: absolute;
  right: 0;
  bottom: 0;
}
.sub-menu-4 {
  right: 0;
  margin: 0 10px 0 400px;
}

＆＃13;

<!-- 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-4">
            <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 -->

＆＃13;

Flexbox标签式菜单：右侧下拉屏幕切断屏

3 个答案: