Removing bullets CSS inheretance query

[Zygoma]

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:

.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

[Paul O'B]

Hi,

List-style is only passed from ol or ul elements to li elements. It can't be passed from an element that is not a list item or even one that is display:list-item but only from ul ,ol or li.

Edit:


oops - I missed that you were targetting the wrong element anyway as mentioned by Ron below. You don't have a ul inside #menu so #menu ul will not work.

[ronpat]

Your code suggests that this is not an issue of inheritance. Rather, it is an issue of targeting the correct element.


The following line assigns the properties to a ul that is a child of an element with an id of "menu":

#menu ul {properties}


The following line assigns the properties to the element with an id of "menu", which presumably is a ul (because of the list-style-type property).

#menu {properties}

[Zygoma]

Brill thanks, your suggestsions have fixed the problem :-)