Buon Giorno from 3 degrees C wetherby UK

on this site http://tutorial.davidclick.com/mag.html i set out to remove the bullet styleing from the links. This ive done through playing around but I would like to know please why when trying to remove the bullet styleing this did not work:

Heres the code:
Code:
.egg
{
position:absolute;
top:0;
right:500;
z-index:50;
}

.title
{
position:absolute;
top:50;
right:300;
z-index:100;
background-color:#FFFFFF;
}

#container
{
margin: 0 auto;
width:960px;
border-width:5px;
border-style:solid;
border-color:red;
padding:0;
height:100%;
position:relative;
}

#menu
{
float:right;
list-style-type:none;
}

#menu a
{
text-decoration:none;
}

#menu li a:link
{
color:#000000;
}

#menu li a:hover
{
color:#C0C0C0;

}

Option 1 Did not work :-(

#menu ul {
float: right;
list-style-type: none;
}


but this did


Option 2 Did work but i cant see why :-(

#menu {
float: right;
list-style-type: none;
}

I thought option 1 would work but i have a feeling i dont quite get the inhertence thing thats going on here. Any insights welcome :-)

Grazie tnato,
David