Css kodlarının karışması yardım edebilir misiniz?

İyi çalışmalar herkese sitemde sayfa içine bir menü daha ekleyeceğim css kodlarını menu.css olarak yapıp indexe bağladım fakat yeni eklediğim menünün yazı stilleri eski menü ile karışıyor. Hatta sitede birkaç yerde bazı yazıları bozuyor. Ben bu css kodlarını sadece bu menünün kullanması için ne yapabilirim?

Menü Kodu:

  <nav id="shift">
    <ul>
      <li><a href="#">YÖNETİM KURULU</a></li>
      <li><a href="#">Netsis Destek</a></li>
      <li><a href="#">Kurumsal</a></li>
      <li><a href="#">Teknik Destek</a></li>
    </ul>
</nav>

Örnek bozan css kodu

nav {
  width: 100%;
  margin: 0 auto;
  background: #fff;
  padding: 50px 0;
  box-shadow: 0px 5px 0px #dedede;
}

nav ul {
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
}
nav ul li a {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #aaa;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before {
  transition: all .5s;
}
nav ul li a:hover {
  color: #555;
}

Etiket seçici yerine sınıf seçici kullanmalısın hocam. CSS seçicileri ile ilgili aşağıdaki yazım faydalı olabilir.

https://medium.com/kodcular/css-secicileri-6253114d9264

Devaloper arkadaşın dediği gibi yapmalısın. Doğrudan nesnelere css ataması yapma yani. Nesnelerinde class veya id vererek atamalar yap. Böylelikle en doğru nesne biçimlendirmesini yaparsın. birkaç yerde bazı yazıları bozuyor sebebi de bu zaten bütün siteye etki edersin eğer class (sınıf) vs kullanmaz isen.

Dediği konu üzerinde biraz araştırdım yapamadım. Verdiğim kodlar üzerinden nereye nasıl dikkat edeceğim konusunda örnek verebilir misiniz? Vaktiniz varsa?

nav.menu {
width: 100%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}

nav.menu ul {
list-style: none;
text-align: center;
}
nav.menu ul li {
display: inline-block;
}
nav.menu ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav.menu ul li a,
nav.menu ul li a:after,
nav.menu ul li a:before {
transition: all .5s;
}
nav.menu ul li a:hover {
color: #555;
}

nav bağlacını direkt olarak .menu ye atayın bu şekilde. Başka bir nav içeren bağlayıcıyı bozamaz.