Pass multiple parameters to url from dropdown menu

This may be a basic question but I am not able to find a solution. I have two drop down. I want to append the url parameter from the 2nd drop down to the first and I am not able to. Here is an example.

When I select SUB11 from dropdown1 the parameter is appended in the URL like this

http://localhost:8080/test/testing.html?par1=sub11

Now when I select SUB21 from dropdown2, this is what I get (not what I want)

http://localhost:8080/test/testing.html&par2=sub21

But I want this to be like this, appended to the already existing url paramter.

http://localhost:8080/test/testing.html?par1=sub11&par2=sub21

I think it has got to do with href in the dropdown2 and I don't know what to set it to. Please help.

 <ul>
        <li>
            <a href="#">Menu 1</a>
            <ul class="dropdown">
                <li><a href="?par1=sub11">SUB11</a></li>
                <li><a href="?par1=sub12">SUB12</a></li>
                <li><a href="?par1=sub13">SUB13</a></li>
            </ul>

        </li>
         <li>
            <a href="#">Menu 2</a>
            <ul class="dropdown">
                <li><a href="&amp;par2=sub21">SUB21</a></li>
                <li><a href="&amp;par2=sub22">SUB22</a></li>
                <li><a href="&amp;par2=sub23">SUB23</a></li>
            </ul>

        </li>
    </ul>

Solution

Ideally you could create a HTML form and use <select> element.

<form method="get">
<select name="menu-1">
    <option value="SUB11">SUB11</option>
    <option value="SUB12">SUB12</option>
    <option value="SUB13">SUB13</option>
</select>
<select name="menu-2">
    <option value="SUB21">SUB21</option>
    <option value="SUB22">SUB22</option>
    <option value="SUB23">SUB23</option>
</select> 
<input type="submit" value="Submit" />

click on submit and you will see they are in the URL: http://localhost:8080/test/testing.html?menu-1=SUB11&menu-2=SUB21

Check this out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select