How can I make <span>dropdown</span> data show in list/table format and have the same function as the dropdown?
<p>The original code is below. Using this code when I select a level1 category from the drop-dropdown another drop down appears with the level2 categories (sub-categories) which correspond to the level1 category.</p>

<p>However, I want it so that my level 1 categories get arrayed in a list format and when I select a category from this list it will automatically array the sub-categories for the selected category in a new list.</p>

<p><img src="http://i.stack.imgur.com/VJds0.png" alt="enter image description here"></p>

<p>Please please help, im not great with this coding stuff</p>

<pre><code>    &lt;form name="newad" method="post" action="newad.php?step=1"&gt;
    &lt;label&gt;{$lng.listings.category}&lt;span class="mandatory"&gt; *&lt;/span&gt;&lt;/label&gt;


{* ----------------------- levels drop down categories --------------------- *}


&lt;div style="border:1px solid #555;"&gt;

        &lt;select id="category1" name="category1" class="levels"  onChange="chooseCateg(this.form,1)"&gt;

        {foreach from=$categories item=v name=cat}
                {if $v.parent_id==0}


               &lt;option value="{$v.id}"&gt;{$v.name|escape:"html"}&lt;/option&gt;
                {/if}
        {/foreach}

   &lt;/select&gt;    


      &lt;/div&gt;

        &lt;div style="display: none;" id="level2"&gt;
        &lt;select id="category2" name="category2" class="levels" 

onChange="chooseCateg(this.form, 2)"&gt;
        &lt;/select&gt;
        &lt;/div&gt;

        &lt;div style="display: none;" id="level3"&gt;


&lt;select id="category3" name="category3" class="levels" onChange="chooseCateg(this.form, 3)"&gt;
        &lt;/select&gt;
        &lt;/div&gt;



  &lt;div style="display: none;" id="level4"&gt;
        &lt;select id="category4" name="category4" class="levels" onChange="chooseCateg

(this.form, 4)"&gt;
        &lt;/select&gt;
        &lt;/div&gt;

        &lt;div style="display: none;" id="level5"&gt;
        &lt;select id="category5" 

name="category5" class="levels" onChange="chooseCateg(this.form, 5)"&gt;
        &lt;/select&gt;
    &lt;input type="hidden" name="category" 

id="category" /&gt;


&lt;/div&gt;
&lt;/div&gt;

&lt;button type="submit"  name="Choose_categ" id="Choose_categ" class="clear"&gt;
            {$lng.listings.next_step}
        &lt;/button&gt;


    &lt;/form&gt;
</code></pre>
