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?

  • please provide class details generated for the elements. – Varun Verma Dec 9 '13 at 10:27
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, privacy policy and cookie policy

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