Left aligning number of Un ordered List
<p>I am playing around with UN-ordered list in HTML and was wondering if following display is possible on dynamically generated <code>ul</code>s.</p>

<pre><code>*    Hello
*        Hi
*        Bi
*    Name
*        Ron
*        Mat
*    Cloth
*        Color
*            Red
</code></pre>

<p>So i start with appending <code>UL</code> to <code>DIV</code> with jquery <code>append</code> function and keep adding depending upon the tree scope, but result i am getting is -</p>

<pre><code>    *Hello
        *Hi
        *Bi
    *Name
        *Ron
        *Mat
    *Cloth
        *Color
            *Red 
</code></pre>

<p>Is there a way to align stars to the left via CSS?</p>