Troubleshooting weird artifact-CodePudding

I've been staring at this for 90 minutes now - and I just can't figure it out.

Why is the 3rd element in the sub-menu of "Other" different than all the others? All elements works as intended in the sub-menu of "Info".

.menu ol {
  list-style: none;
  padding: 0;
  margin: 0;
}
.menu ol:first-child {
  width: 100%;
  max-width: 960px;
  max-height: 120px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: center;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.3);
}
/* @@@ STYLING av rutor @@@ */
.menu-item-woodwork,
.menu-item-art,
.menu-item-other,
.menu-item-videos,
.menu-item-customorder,
.menu-item-music,
.menu-item-about
{
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 4px solid #504D2C; /* FÄRG på inaktiv top-border */
  position: relative;
  transition: background 0.3s ease-in-out;
  height:100px;
}
/* @@@ TYP av ikoner @@@ */
.menu-item-woodwork:nth-child(1) > a::before {
    font: var(--fa-font-brands);
    content: "\f3bd";
}
.menu-item-art:nth-child(2) > a::before {
    font: var(--fa-font-brands);
    content: "\f3f8";
}
.menu-item-other:nth-child(3) > a::before {
    font: var(--fa-font-solid);
    content: "\f3a5";
}
.menu-item-videos:nth-child(4) > a::before {
    font: var(--fa-font-solid);
    content: "\f144";
}
.menu-item-customorder:nth-child(5) > a::before {
    font: var(--fa-font-solid);
    content: "\f12e";
}
.menu-item-music:nth-child(6) > a::before {
    font: var(--fa-font-brands);
    content: "\f3b5";
}
.menu-item-about:nth-child(7) > a::before {
    font: var(--fa-font-solid);
    content: "\f2bd";
}
/* @@@ STYLING av ikoner @@@ */
.menu-item-woodwork:nth-child(1) > a::before,
.menu-item-art:nth-child(2) > a::before,
.menu-item-other:nth-child(3) > a::before,
.menu-item-videos:nth-child(4) > a::before,
.menu-item-customorder:nth-child(5) > a::before,
.menu-item-music:nth-child(6) > a::before,
.menu-item-about:nth-child(7) > a::before 
{
  font-size: 1.2rem;
  display: block;
  margin-bottom: 1rem;
  font-weight: 900;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  color: #B6AB34;
  border: none;
  margin-top:12px;
  text-shadow: none !important;
}
/* @@@ Gap mellan kategoriernas top-border  @@@ */
.menu-item-woodwork:not(:last-child),
.menu-item-art:not(:last-child),
.menu-item-other:not(:last-child),
.menu-item-videos:not(:last-child),
.menu-item-customorder:not(:last-child),
.menu-item-music:not(:last-child),
.menu-item-about:not(:last-child)
{
  border-right: 0px solid rgba(255, 255, 255, 0.15);
}
/* @@@ STYLING av sub-meny @@@ */
.menu-item-other .sub-menu,
.menu-item-about .sub-menu
{
  position: absolute;
  top: 100%;
  width: 100%;
  transform-origin: top;
  transform: rotateX(-90deg);
  transition: transform 0.3s linear;
  background-color: gray;
}
/* @@@ Border mellan varje sub-ruta @@@ */
.menu-item-other .sub-menu .menu-item-other,
.menu-item-about .sub-menu .menu-item-about
{
  border-color: red;
}
/* @@@ ? @@@ */
.menu-item-other .sub-menu .menu-item-other a::before
{
  content: "o";
}
.menu-item-about .sub-menu .menu-item-about a::before
{
  content: "a";
}
/* @@@ Tar bort top-border på första sub-rutan @@@ */
.menu-item-other .sub-menu .menu-item-other:first-child,
.menu-item-about .sub-menu .menu-item-about:first-child
{
  border: 0;
}
/* @@@ FÄRG på aktiv & hover ikon @@@ */
.menu-item-woodwork:hover a::before,
.menu-item-art:hover a::before,
.menu-item-other:hover a::before,
.menu-item-videos:hover a::before,
.menu-item-customorder:hover a::before,
.menu-item-music:hover a::before,
.menu-item-about:hover a::before
{
  color: #B6AB34;
}
/* @@@ ? @@@ */
.menu-item-other:hover .sub-menu, 
.menu-item-about:hover .sub-menu
{
  transform: rotateX(0deg);
}
/* @@@ FÄRG på inaktiv länk-text @@@ */
.menu-item-woodwork a,
.menu-item-art a,
.menu-item-other a,
.menu-item-videos a,
.menu-item-customorder a,
.menu-item-music a,
.menu-item-about a
{
  font-family: 'limelight', sans-serif !important;
  font-style: normal !important;
  color: #504D2C !important;
  /* text-shadow: 2px 2px 4px #8A8A8A !important; */
  font-size:18px !important;
  font-weight:900 !important;
  font-variant:normal !important;
  text-decoration:none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  width: 100%;
  padding: 0;
  }
/* @@@ FÄRG på hover länk-text @@@ */ 
.menu-item-woodwork a:hover,
.menu-item-art a:hover,
.menu-item-other a:hover,
.menu-item-videos a:hover,
.menu-item-customorder a:hover,
.menu-item-music a:hover,
.menu-item-about a:hover
{ 
color: #B6AB34 !important;
}
/* @@@ FÄRG på aktiv länk-text @@@ */
body#home a#nav-home,
body#woodwork a#nav-woodwork,
body#leather a#nav-other,
body#other a#nav-other,
body#artwork a#nav-artwork,
body#other a#nav-other,
body#videos a#nav-videos,
body#customorder a#nav-customorder,
body#music a#nav-music,
body#info a#nav-info,
body#contact a#nav-info,
body#about a#nav-info,
{
  color: #B6AB34 !important;
  font-weight: 900;
  text-decoration: none;
}
/* @@@ FÄRG på aktiv top-border @@@ */
body#woodwork .menu-item-woodwork,
body#art .menu-item-art,
body#other .menu-item-other,
body#videos .menu-item-videos,
body#customorder .menu-item-customorder,
body#music .menu-item-music,
body#about .menu-item-about
{ 
border-top: 4px solid #B6AB34; 
}
/* @@@ FÄRG på hover top-border @@@ */
.menu-item-woodwork:hover,
.menu-item-art:hover,
.menu-item-other:hover,
.menu-item-videos:hover,
.menu-item-customorder:hover,
.menu-item-music:hover,
.menu-item-about:hover
{
  border-top: 4px solid #B6AB34;
  background-color: rgba(255, 255, 255, 0.15);
}

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>NAVBAR</title>
<link href="https://fonts.googleapis.com/css?family=Signika Negative|Architects Daughter|Special Elite|Limelight|Open Sans Condensed:300|IM Fell DW Pica SC|IM Fell Double Pica|IM Fell Double Pica SC|Italiana|Nothing You Could Do|Montserrat:700,900" rel="stylesheet" type="text/css"> 
  <link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/31e5f5f95a.js" crossorigin="anonymous"></script>
</head>
<body id="woodwork">

<nav >
  <ol>
    <li ><a href="#" id="nav-woodwork">Woodwork</a></li>
    <li ><a href="#">Art<br/>&nbsp;</a></li>
    <li ><a href="#">Other</a>
      <ol >
        <li ><a href="#">1</a></li>
        <li ><a href="#">2</a></li>
        <li ><a href="#">3</a></li>
        <li ><a href="#">4</a></li>
        <li ><a href="#">5</a></li>
      </ol>
    </li>
    <li ><a href="#0">Videos</a></li>
    <li ><a href="#0"><center>Custom<br/>Order</center></a></li>
    <li ><a href="#">Music</a></li>
    <li ><a href="#">Info</a>
      <ol >
        <li ><a href="#">1</a></li>
        <li ><a href="#">2</a></li>
        <li ><a href="#">3</a></li>
        <li ><a href="#">4</a></li>
        <li ><a href="#">5</a></li>
        <li ><a href="#">6</a></li>
      </ol>
    </li>
  </ol>
</nav>
</body>
</html>

Don't hate me for my messy .css lol, this is still a work in progress. But I'm stuck on this problem.

CodePudding user response：

Problem

.menu-item-other:nth-child(3) > a::before {
    font: var(--fa-font-solid);
    content: "\f3a5";
}

These styles are only supposed to affect the main menu but you are reusing the same menu-item-other class on both menu levels. This selector also affects children (really only the 3rd child).

Fix

Adding .menu > ol > is more specific to affect only the main menu.

.menu > ol > .menu-item-other:nth-child(3) > a::before {
    font: var(--fa-font-solid);
    content: "\f3a5";
}