CSS Drop-Down with <select> not useable in IE

Question

A client at work has requested that we convert a form into a drop-down menu on their navigation. Not a problem in itself, but we are not allowed to use any JS here. If we can't come up with any other fix though they will allow a small vanilla JS script to deal with the problem.

The Problem

The input on the form cannot be used in Internet Explorer as the entire menu hides on clicking on the form element.

I have made a JS Fiddle of the issue, and would appreciate any help anyone can provide here. The HTML/CSS is not my own. It was already in the project, unfortunately I can't strip it down further than this otherwise other parts of the site break.

I have posted the HTML/CSS below as well for those who would rather just read it here than over on JS Fiddle.

The HTML:

<div class="head-basket">
   <div class="button">Shopping Basket</div>

   <div class="basket-container">
      <form method="post" action="#" enctype="multipart/form-data">
         <div><input type="hidden" name="basket" value="1" /></div>
         <table cellspacing="0" cellpadding="0" border="0">
            <tbody>
               <tr class="product-row">
                  <td class="item"><a href="/?r=238637" title="remove Dickies Redhawk Super Work Trousers with Free Knee Pads" class="rem">x</a><a href="/dickies-workwear/dickies-knee-pad-trousers/dickies-redhawk-super-work-trousers-with-free-knee-pads-p545.htm">Dickies Redhawk Super Work Trousers with Free Knee Pads</a></td>
                  <td class="quantity">
                     <select name="q238637" id="q238637" class="do-change">
                        <option value="1" selected="selected">1</option>
                        <option value="2">2</option>
                        <option value="3">3</option>
                        <option value="4">4</option>
                        <option value="5">5</option>
                        <option value="6">6</option>
                        <option value="7">7</option>
                        <option value="8">8</option>
                        <option value="9">9</option>
                        <option value="10">10</option>
                        <option value="11">11</option>
                        <option value="12">12</option>
                        ...
                     </select>
                  </td>
               </tr>
               <tr class="product-desc">
                  <td class="item" colspan="2"><span>Waist Size: 30", Leg Length: 30", Colour: Black</span></td>
               </tr>
               <tr class="tax-row">
                  <td colspan="3"><span>Item total:</span>£14.99</td>
               </tr>
               <tr class="tax-row">
                  <td colspan="3"><span>UK tax at 20%:</span>£3.00</td>
               </tr>
               <tr class="total-row">
                  <th colspan="3"><span>Total:</span> £17.99</th>
               </tr>
               <tr class="spacer-row">
                  <td colspan="3"> </td>
               </tr>
               <tr class="delivery info-row">
                  <td colspan="3">
                     <p><span class="bold">Free Delivery</span> to England for orders over <span class="bold">£90.00</span> (excluding tax). </p>
                     <p>Spend another <span class="bold">£75.01</span> to qualify!</p>
                  </td>
               </tr>
            </tbody>
         </table>
         <div class="buttons">
            <noscript><div><input type="submit" class="button update" value="Update" /></div></noscript>
            <a href="/your-basket/" class="button tobasket action" rel="nofollow"><tt>Proceed to Secure</tt>Checkout</a>
         </div>
      </form>
   </div>
</div>​ 

And the CSS:

.head-basket {
    position: absolute;
    z-index: 1000;
    width: 190px;
    right: 0;
    top: 23px;
}

.head-basket .button {
    width: 90%;
    border: none;
    padding: 5%;
    text-align: center;
}

.head-basket .button:hover {
    border-bottom: none;
    box-shadow: none;
}

.head-basket:hover .button {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    color: #fff;
    border-bottom: none;
}

.head-basket .basket-container {
    background: #fff;
    border: 2px solid #000002;
    display: none;
    padding: 3px;
}
.head-basket:hover .basket-container, .head-basket:active .basket-container, .head-basket .basket-container:active, .head-basket .basket-container:hover {
    background: #fff;
    display: block;
}


button, .button, .button:visited {
        display: inline-block;
        padding: 8px 15px;
        line-height: normal;
        position: relative;
        white-space: nowrap;
        font-size: 12px;
        font-weight: bold;
        color: #aaa;
        background: #000002;
        background: -moz-linear-gradient(#383834,#222222);
        background: -webkit-linear-gradient(#383834,#222222);
        -ms-filter: "progid:dximagetransform.microsoft.gradient(startcolorstr='#383834',endcolorstr='#222222')";
        filter: progid:dximagetransform.microsoft.gradient(startcolorstr='#383834',endcolorstr='#222222');
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        border-radius: 3px;
        border: 1px solid #111;
        border-bottom-color: #555;
        border-left-color: #555;
        cursor: pointer;
        user-select: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        text-decoration: none;
        text-align: left;
        border-width: 2px
}

button:hover, .button:hover {
        text-decoration: none; 
        -webkit-box-shadow: 0 1px 1px #c6c6c6; 
        -moz-box-shadow: 0 1px 1px #c6c6c6; 
        box-shadow: 0 1px 1px #c6c6c6; 
        color: #fff !important;
}

button:focus, .button:focus { 
        outline: 0; 
}

button:active, .button:active { 
        -webkit-box-shadow: inset 0 1px 2px #c6c6c6; 
        -moz-box-shadow: inset 0 1px 2px #c6c6c6; 
        box-shadow: inset 0 1px 2px #c6c6c6;
}​

Answer 1

There is a possibility of using :target selector for IE9. In you example you replace div.button with a.button:

   <a href="#basket-container" class="button">Shopping Basket</a>

Add anchor to div.basket-container:

<div class="basket-container" id="basket-container">
...
</div>

And then use :target selector to have dropdown opened:

.head-basket .basket-container:target {
    background: #fff;
    display: block;
}

http://jsfiddle.net/HssXt/10/

http://www.quirksmode.org/css/contents.html#t316

Though, you will need some additional close button to remove the hash from this target. And in this case, still, IE8 and below won't get any solution.

So it's inevitable. You either use JS to add some "active" class or replace select with text input.

Another thing to consider is to remove that select input from the dropdown at all. Changing quantities in cart dropdown seems like a very infrequent use-case to me. And that functionality will be on checkout page anyways (will it?), so you can simplify the interface and get rid of a problem at the same time.