More correct way to avoid using a list for dropdown This is my code

&lt;ul id="filter"&gt;
    &lt;li&gt;&lt;a href="#" class="dropdown"&gt;Any status &amp;#9662;&lt;/a&gt;
        &lt;form&gt;
            &lt;ul class="opt"&gt;
                &lt;li&gt;
                    &lt;input class="option" type="submit" name="status" value="Active" /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;input class="option" type="submit" name="status" value="Inactive" /&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/form&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#" class="dropdown"&gt;Any date &amp;#9662;&lt;/a&gt;
        &lt;form&gt;
            &lt;ul class="opt"&gt;
                &lt;li&gt;
                    &lt;input class="option" type="submit" name="date" value="Today" /&gt;
                &lt;/li&gt;
                &lt;li&gt;
                    &lt;input class="option" type="submit" name="date" value="This Week" /&gt;
                &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/form&gt;
    &lt;/li&gt;
&lt;/ul&gt;


In this example I have a dropdown with a list that I then make an effort to style not like a list (i.e removing bullet points, etc). 

Is it possible to produce cleaner code to achieve the same result, without using a list structure, or is a list actually the right approach to this problem?
Lists are optional, but most people feel that you should use some sort of block level element to contain inline elements (some of the reasoning you'll hear is that the content still makes sense even if there's no styling or that you have a "list of options").  If you don't want to use a list, you'd be looking at elements like paragraph (which is wrong here since you're looking at text fragments) or the semantically void div to fill this role.



How does one look at inactive items from yesterday?  To me, this looks like a misuse of form elements.  The submit element isn't for changing state in a form, it is for submitting the contents of the form.

If you're only allowed to look at inactive or active items and never both, then a select element is what you should be using.  If the data is allowed to be filtered by any combination (some/all/none), then you should be looking at checkboxes grouped together by a fieldset:

&lt;form&gt;
    &lt;fieldset&gt;
        &lt;legend&gt;Status&lt;/legend&gt;

        &lt;ul&gt;
            &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" checked /&gt; Active&lt;/label&gt;&lt;/li&gt;
            &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" /&gt; Inactive&lt;/label&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/fieldset&gt;

    &lt;fieldset&gt;
        &lt;legend&gt;Date&lt;/legend&gt;

        &lt;ul&gt;
            &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" checked /&gt; Today&lt;/label&gt;&lt;/li&gt;
            &lt;li&gt;&lt;label&gt;&lt;input type="checkbox" /&gt; Yesterday&lt;/label&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/fieldset&gt;
&lt;/form&gt;


http://jsfiddle.net/kx4w7/1/