Problem with my menu / unordered list

Discussion in 'HTML' started by Fister, Dec 14, 2007.

  1. Fister

    Fister Guest

    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
    Fister, Dec 14, 2007
    #1
    1. Advertising

  2. Fister

    Ben C Guest

    On 2007-12-14, Fister <> wrote:
    > 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.
    Ben C, Dec 14, 2007
    #2
    1. Advertising

  3. Fister wrote:
    > 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?).


    <snip markup>

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

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



    --
    Take care,

    Jonathan
    -------------------
    LITTLE WORKS STUDIO
    http://www.LittleWorksStudio.com
    Jonathan N. Little, Dec 14, 2007
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Nathan Sokalski
    Replies:
    1
    Views:
    25,912
  2. ibiza
    Replies:
    5
    Views:
    1,157
    S. Justin Gengo [MCP]
    Feb 9, 2006
  3. spaghetti
    Replies:
    3
    Views:
    533
  4. Nico Grubert
    Replies:
    0
    Views:
    286
    Nico Grubert
    Jun 30, 2010
  5. Stefan Behnel
    Replies:
    0
    Views:
    491
    Stefan Behnel
    Jun 30, 2010
Loading...

Share This Page