1

My current navigation is like below:

Page1
- Link1
- Link2

I want to show "arrow" for Page1 and "bullets" for "Link1" and "Link2".

I am able to do the "arrow" part using the following code:

.ms-noList ul, .ms-noList ol, .ms-noList
{
    list-style-image:url('arrow.gif');
}

This shows arrow along with "Page1" link. But problem is it also shows same arrow for all sublinks too. I want to show a separate bullet image for sub links.

How do I do that?

1
  • please provide class details generated for the elements. Dec 9, 2013 at 10:27

1 Answer 1

0

I imagine your markup looks something like this:

<div class="ms-noList">
    <ul>
        <li>
            Page 1
            <ul>
                <li>
                    Link 1
                </li>
                <li>
                    Link 2
                </li>
            </ul>
        </li>
    </ul>   
</div>

If you just define the list-style-image for both types of lists, you can overwrite the first one, due to cascading:

.ms-noList ul {
    list-style-image: url('arrow.gif');
}

.ms-noList ul ul {
    list-style-image: url('bullet.gif');
}

/* or */

.ms-noList ul ul {
    list-style-image: none;
    list-style-type: disc;
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.