CSS样式不应用于循环内生成的列表项的原因是因为您将列表项作为字符串连接到header元素的innerHTML属性。当您使用+=运算符连接列表项时，浏览器将被迫重新呈现整个header元素，这将重置CSS类应用的样式。
要解决此问题，您应该为循环中的每个项目创建一个新的<li>元素，并使用appendChild()将其附加到<ul>元素。下面是您的代码的更新版本，应该可以工作：

function MainPage(){
  document.querySelector('title').innerText = "Main";
  const header = document.querySelector('header');
  header.innerHTML =
      `<h1 style="color:rgb(50, 35, 117);"><p align="center">Music Albums</p></h1>
    <hr>
    <ul class="menu">
        <li><a onclick="MainPage()">Main</a></li>
    </ul>`;

  const ul = header.querySelector('ul');
  countries.forEach((country) => {
      const li = document.createElement('li');
      const a = document.createElement('a');
      a.innerText = country.name;
      a.setAttribute('onclick', `CategoryPage('${country.id}')`);
      li.appendChild(a);
      ul.appendChild(li);
  });
}

在这段代码中，每个列表项都被创建为一个单独的DOM元素，并使用appendChild()添加到无序列表中，因此应用于<li>元素的CSS类应该可以按预期工作。

将<ul>构建为单个字符串。完成后，将其附加到头文件。

function MainPage(){

    document.querySelector('title').innerText = "Main";
    const header = document.querySelector('header');
    header.innerHTML=
        `<h1 style="color:rgb(50, 35, 117);"><p align="center">Music Albums</p></h1>
        <hr>`;

    let list = `<ul class = "menu">
            <li><a onclick="MainPage()">Main</a></li>`;

    countries.forEach(
        (country) =>{
            list +=
                `<li><a onclick="CategoryPage('${country.id}')">${country.name}</a></li>`;
        }
    );

    list += `</ul>`;

    header.innerHTML += list;
}