Trouble with CSS styles applying to everything - html

Question

I want to create a horizontal navigation bar on one of my pages, so I used a list and then edited it in CSS. However, the same page also has other lists, and when I have applied the styling it has worked for the nav bar, but has completely destroyed the other lists! How do I get round this? I've tried ID tags but I don't know if they overrule applying a certain style to all lists? This is my CSS code:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
All lists on the page are 'standard' lists, i.e. they are all bog standard <ul> or <ol> with no id tags - apart from the navigation bar list, which I have called 'menubar'.

Answer 1

For the menubar styles you need to apply the id like #menubar also for its child elements if you only want them to apply inside the menubar
see example:
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li {
float: left;
}
#menubar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
<ul id="menubar">
<li><a>one</a></li>
<li><a>two</a></li>
<li><a>three</a></li>
</ul>
<ul>
<li><a>normal one</a></li>
<li><a>normal two</a></li>
<li><a>normal three</a></li>
</ul>

Answer 2

the problem with your CSS is that you apply styles to all 'li' and 'li a' elements. The best way to get this to work is to be a bit more specific to where you want to apply the CSS.
Try the following (using your code above).
#menubar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #85aff2;
}
#menubar li{
float: left;
}
#menubar li a{
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

Answer 3

If you don't specify an ID or a class the style will affect every matching element.
In your example, you style elements with the id "menubar", and then you style ALL "li" elements and lastly all "li" and "a" elements.
If you wish to apply your style only to items in your navigation menu, you could give them a class like "nav_menu", and write the style like this:
.nav_menu {
float: left;
}
.li_and_a {
display: block;
color:white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
so your list items with the float now need the class "nav_menu" and the list items and the a items need the "li_and_a" class.
Doing this will not impact any other "li" or "a" elements on your page unless they have that specific class.

Answer 4

There are several ways to resolve this, but I think that at this point, the most practical way would be to use the :not() selector with your lists and exclude the #menubar.
For example, if your #menubar is a id for a li, you could add it like this:
li:not(#menubar) {
/* your css */
}
li:not(#menubar) a {
/* your css */
}
EDIT 28/02
My understanding is that you have your horizontal bar with the #navmenu and the rest of your CSS you do not want to take effect in it.
If that is what you want, this solution does work. As it was tested on jsfiddle.
https://jsfiddle.net/a2kj8vds/