html - Why is my css file for my ul class links keep on getting overwritten by user agent stylesheet?

Question

Can somebody help me please, as this is causing me sleepless nights. I've programmed a website with a navigation bar. The CSS code works fine when it is within the HTML code but when it is in a separate file the CSS code seems to only work on the li tags but not for the ul tags. Please see below for HTML & then the CSS.

ul.OPEN_menu {
  display: block;
  padding: 5px;
  background-color: #c00;
  border: 7px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-radius: 1em;
  width: 10em;
  list-style: none;
  font: bold 20px Arial, sans-serif;
  text-align: center;
  text-transform: capitalize;
  margin-left: auto;
  margin-right: auto;
  display: initial;
}

ul.closedMENU {
  display: block;
  padding: 5px;
  background-color: #c00;
  border: 7px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-radius: 1em;
  width: 10em;
  list-style: none;
  font: bold 20px Arial, sans-serif;
  text-align: center;
  text-transform: capitalize;
  height: 1em;
  margin-left: auto;
  margin-right: auto;
}

ul.closedsubmenu li {
  padding: 5px;
  background-color: yellow;
  border: 7px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-radius: 1em;
  width: 6.9em;
  margin: 5px;
  list-style: none;
  margin-left: -45px;
  visibility: hidden;
}

ul.OPEN_submenu li {
  padding: 5px;
  background-color: yellow;
  border: 7px;
  border-top-style: solid;
  border-bottom-style: solid;
  border-radius: 1em;
  width: 6.9em;
  height: 3em;
  margin: 5px;
  list-style: none;
  margin-left: 13px;
  visibility: visible;
  font: bold 24px Arial, sans-serif;
  text-align: center;
  text-transform: capitalize;
}

ul.menu,
ul.menu ul {
  display: none;
}

ul.menu li {
  display: none;
}

ul.menu li ul {
  display: none;
}

ul.menu a {
  display: none;
}

ul.menu li ul li {
  display: none;
}

ul.menu li ul li a {
  display: none;
}

ul.menu li.submenu:hover {
  display: none;
}

ul.menu li.submenu:hover ul {
  display: none;
}

ul.menu li.submenu:hover ul li {
  display: none;
}

ul.menu li.submenu:hover ul li:hover {
  display: none;
}

<ul class="OPEN_menu OPEN_submenu" id="box1">
  <div id="MENU_heading_HIDDEN">Menu</div>
  
  <li id="MENU_heading_HIDDEN"><br>
    <a href="../Game_Art_Work.html">Game Art Work</a></li>
  <li id="MENU_heading_HIDDEN"><br>
    <a href="../Games.html">Games</a></li>
  <li id="MENU_heading_HIDDEN"><br>
    <a href="../Games_D.html">Game D</a></li>
</ul>

标签： htmlcsslisthtml-lists