La etiqueta de identificación no está funcionando correctamente en Firefox.

Tengo el siguiente código:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
#bigmenu {
  font-size: 1.5em;
  text-decoration: none
}

#topzindex {
  position: relative;
  z-index: 100;
}

nav ul li ul {
  display: none;
}

nav ul li {
  float: left;
  list-style: none;
  width: 150px;
  height: 30px;
  background: #02517F;
  text-align: center;
  padding-top: 12px;
  border-right: 2px solid white;
}

nav ul li:hover {
  background: #466A7F;
  text-align: center;
}

nav ul ul {
  margin-top: 10px;
}

nav ul li ul li {
  margin-left: -40px;
}

nav ul li:hover>ul {
  display: block;
}

nav ul li ul li {
  background: #49BBFF;
}

nav ul li ul li:hover {
  background: #466A7F;
}
<!-- language: lang-html -->
<nav id="topzindex">
  <ul>
    <li>
      <a href="#" id="bigmenu">Ξ</a>
      <ul>
        <li> <a href="#">link 1</a> </li>
        <li> <a href="#">link 2</a> </li>
        <li> <a href="#">link 3</a> </li>
      </ul>
    </li>
  </ul>
</nav>

<!-- end snippet -->

Quiero que el menú principal sea más grande que los otros elementos. Por lo tanto, agregué la etiqueta “id” “bigmenu”. En Chrome y Edge, “bigmenu” funciona correctamente. En Firefox no.

¿Sabes qué está mal?

PD:
Versión de Firefox: 95.0.2 (64 bits)