Question

I’m having difficulties with a few css items on my website.
It all comes down to list items!

I have a menu bar that works using <ul> <li> and <ol> tags with their own css file, I have a slider that works on <li> from another css file and then some site content that has its own css file – but they all seem to be overwriting each other and hiding other items!

Has anyone got any tips on how to keep all these separate or how to stop this from occurring?

Here is an example of the menu css that seems to be changing everything:
http://pastebin.com/8Jd2XUUT
and the core menu css:
http://pastebin.com/eVsRvxs5
menu html: http://pastebin.com/P7Qh0M8a main sites css: http://pastebin.com/kKqP0N1C

Answer 1

Learn about CSS specificity, and how to use classes and ids. These concepts will help you manage your CSS.

So in your HTML you could have:

<ul></ul>
<ul class="foo"></ul>
<ul class="foo" id="bar"></ul>

Then in your CSS:

/* This targets all ul elements */
ul {
    font-size: 2em;
}
/* This targets only ul elements with a class of foo. It's more specific (has a higher specificity) than the above */
ul.foo {
    font-size: 3em;
    color: aqua;
}
/* The ul with a class of foo and an id of bar gets both sets of styles, but as ID has a higher specificity than class, the font size will be bigger. */
ul#bar {
    font-size: 4em;
}

---

Edit: Ah-ha, I see the problem! Your CSS files appear to target items in <ul class="menu"> and <ul class="lblue"> respectively. You have a <ul class="menu lblue slide">, which means both CSS files will be targeting the same ul and one will override the other. The result will be a complete mess.

You need to separate the two menus in the HTML and target them accordingly, e.g.

<ul class="menu"><!-- Put the menu HTML code here --></ul>
<ul class="lblue"><!-- Put the lblue HTML code here --></ul>

You also seem to have misunderstood the id attribute. You can only use an id once per page, and it cannot contain spaces. So id="lblue li" will not work at all. I’d suggest removing them for now!