How Do I Create A Unordered List In Html With Sub Arrows?

I want to know how to accomplish something similar to this in wordpress. Any suggestions? maybe a sample code. Can you show me an example how to apply it to the sub bullets?

Solution 1:

You could use li:before{ content:"....";} to make an arrow? Like this:

<ul>
    <li>Disaster</li>
    <ul>
        <li>stuff</li>
        <li>Stuff2</li>
    </ul>
</ul>

CSS:

ul ul li:before {

         content: "\2192 \0020";
}
ul ul {
    list-style: none;
}

See it in function here, on this fiddle: http://jsfiddle.net/f9AzK/

Solution 2:

Yup. Use CSS, list-style-image.

http://www.w3schools.com/cssref/pr_list-style-image.asp

Solution 3:

Use li:before { content: ...; }

HTML

<ul>
    <li>Disater Assistance Center Manager
        <ul id="sub">
            <li>San Jaun</li>
        </ul>
    </li>
</ul>

CSS

#sub { list-style:none; }
#sub li:before {
    content: "\2192 \0020";
}

JSFiddle

Other special characters can be found here.