Problem with my menu / unordered list

[Fister]

Hi

I've got a problem with my menu / unordered list. I want to display a list
item marker when the item is selected but when constructed the following
way the list items below the selected list item also get the list item marker.
I understand that the list items below are in the selected list item but
is there anyway to get around this or should I structure my list otherwise
(how?).

<ul>
<li><a href="#">Item 1</a></li>
<li class="selected"><a href="#">Item 2</a>
<ul>
<li><a href="#">Item 2.1</a></li>
<li><a href="#">Item 2.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>

<li><a href="#">Item 4</a></li>

</ul>


li.selected
{
list-style-image: url(Marker.jpg);
}


This is what I want

Item 1

Item 2

Item 2.1
Item 2.2
Item 3
Item 4

Currently I have

Item 1

Item 2
> Item 2.1
> Item 2.2

Item 3
Item

 

[Ben C]

Hi

I've got a problem with my menu / unordered list. I want to display a list
item marker when the item is selected but when constructed the following
way the list items below the selected list item also get the list item marker.
I understand that the list items below are in the selected list item but
is there anyway to get around this or should I structure my list otherwise
(how?). [...]
li.selected
{
list-style-image: url(Marker.jpg);
}


This is what I want

Item 1

Item 2

Item 2.1
Item 2.2
Item 3
Item 4

Currently I have

Item 1

Item 2
Item 2.1
Item 2.2

Item 3
Item 4

Just add li { list-style-image: none }, as well as the li.selected
selector you already have.

list-style-image is an inherited property, so the inner list item is
inheriting its value from the outer one.

It doesn't matter what order you put the li and li.selected selectors in
the style sheet in since li.selected is more specific.

 

[Jonathan N. Little]

Hi

I've got a problem with my menu / unordered list. I want to display a
list item marker when the item is selected but when constructed the
following way the list items below the selected list item also get the
list item marker. I understand that the list items below are in the
selected list item but is there anyway to get around this or should I
structure my list otherwise (how?).

li.selected
{
list-style-image: url(Marker.jpg);
}


This is what I want

Item 1
Item 2.1
Item 2.2
Item 3
Item 4

Currently I have

Item 1
Item 3
Item 4

Just add:

/* children of "selected" have no image */
li.selected li { list-style-image: none; }