<nav role="navigation" aria-label="External Links" class="menu--group">
<ul class="menu">
<li class="menu-item"><a href="#" target="_blank" class="sf-depth-1 ">Alumni</a></li>
<li class="menu-item"><a href="#" target="_blank" class="sf-depth-1 menuparent">Athletics</a></li>
<li class="menu-item"><a href="#" target="_blank" class="sf-depth-1 menuparent">Health Care</a></li>
</ul>
</nav>
.menu--group {
.menu {
@include flexbox;
@include margin($top: $lg, $left: 0, $bottom: $sm);
li {
@include flexbox;
flex: 1;
border: 1px solid $grey-light;
border-right: none;
justify-content: center;
&:hover,
&:focus {
background: $light;
}
a {
display: block;
text-decoration: none;
color: $med-gray;
line-height: 1.3;
flex: 1;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 1rem;
&:hover,
&:focus {
text-decoration: underline;
}
}
&:last-child {
border-right: 1px solid $grey-light;
}
}
}
}
.menu--group a[target="_blank"]:after {
content: "\f35d";
@include fas();
font-size: $small-font-size;
color: $secondary;
padding-left: $sm;
}