CSS issue: link is wrongly displayed

Question

a {
    color: #000;
}

a:hover {
    text-decoration: none;
    color: #fff;
}

That is the code I use. But, none of the links I have in my pages listen to this. They abide by this instead:

#menu li, a{
    text-align: center;
    display: block;
    float: left;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size:1.2em;
    color: #575757;
    text-decoration: none;
    list-style: none;
}

Therefore a lot of the links are skewed, as they all float left and things.
The code for the links itself isn't wrapped in any way. At least not in a way that explains my errors.

<div id="footer">
<p><center>Copyright 2008 - <a href="index.php">G.S.B.V. Pugilice</a></center></p>
</div>

That bit of code gives me two lines instead of one, the link floats left on the second line.

Answer 1

I think you may be mis-understanding how selectors work.

#menu li, a { ... }

Means apply styles to any li descendant of a element with the id #menu and to any a found any where.

Did you actually intend:-

#menu li, #menu a {...}

?