How do I overwrite a css stylesheet in the html code? corresponding problem with <ul> and <li>

Question

Hey there.
So, I have a css where I define <ul> and <li> for my top navigation. How do I stop this stylesheet from working? Can I limit the stylesheet to the topnav only? - I have a few lists later on where I'm using <ul>, and therefore <li>, as well, but css "destroys" that.
For example:
One point in my css is:
ul {list-style-type: none}
but I want to show the dots later on etc.

I hope you're getting what I'm trying to say.
Thanks for your answers already.
Greetings. :)

Answer 1

make a class
.nodots {list-style-type: none}

now you can add the class to ul from js to remove the dots or remove the class to show it.

let ulelement = document.querySelector('ul')

ulelement.classList.add('nodots'); //remove dots
ulelement.classList.remove('nodots'); //dhow dots

Answer 2

First of all: thank you, but it's not only about the dots.
Here's my full css:
Do I have to create a class for every single one of these (<ul> & <li>)?

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: linear-gradient(#D68C56, rgb(209, 159, 106));
}

li {
float: left;
border-right: 1px solid #FFF0B1;
}

li a {
display: block;
color: #FFF0B1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li:last-child {
border-right: none;
}

/* Change the link color to #111 (black) on hover */
li a:hover {
color: #5A3A29;
}
/* Not working yet */
.active {
background-color: #4CAF50;
}
/* Dropdown */
li a, .dropit {
display: inline-block;
color: #FFF0B1;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover, .dropdown:hover .dropit {
color: #5A3A29;
}

li.dropdown {
display: inline-block;
}

Answer 3

only the parts that you want to toggle.