help with nav

[meltedtoons]

So I have the html code

<div id="navagation">
<ul>
<li><a href="http://answermyhw.webs.com/bantingriver.html">Home</a></li>
<li><a href="http://answermyhw.webs.com/c5551.html">Chatten</a></li>
<li><a href="http://answermyhw.webs.com/b4639.html">Blizzard</a></li>
<li><a href="http://answermyhw.webs.com/t7758.html">Therasse
</a></li>
<li><a href="http://answermyhw.webs.com/a991.html">About</a></li>
<li><a href="http://answermyhw.webs.com/d4745.html">Disclaimer</a></li>
</ul>
</div>

and the CSS

#navagation {
width: 996px;
height: 25px;
background:#98bf21;
overflow: hidden;
border-left: solid 2px;
border-right: solid 2px;
margin-left: auto;
margin-right: auto;
}

ul
{
list-style-type:none;
margin:0;
padding-left: 100px;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}

But the problem is the CSS code makes ALL the links on the website in to a nav styled link. How do you limit the code to only work on #navagation
(i know it's spelled wrong)

[Wickham]

When you have styles like


ul { width: 300px; }
li { color: red; }

those styles affect all ul and li tags on your page, so put extra styles AFTER them in your stylesheet like


#navagation ul
{
list-style-type:none;
margin:0;
padding-left: 100px;
overflow:hidden;
}
#navagation li
{
float:left;
}
#navagation a:link, #navagation a:visited
{
display:block;
width:120px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:4px;
text-decoration:none;
}
#navagation a:hover, #navagation a:active
{
background-color:#7A991A;
}


where the id (or class) will restrict the styles to that id (or class). Note that where you have two or more style names for a style you have to repeat the id or class for all of them like #navagation a:hover, #navagation a:active