Removing bullets CSS inheretance query

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 :frowning:

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

but this did

Option 2 Did work but i cant see why :frowning:

#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 :slight_smile:

Grazie tnato,
David

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.

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}

Brill thanks, your suggestsions have fixed the problem :slight_smile: