Select element on Foundation accordion panel broken in Mozilla Firefox

Question

This has stumped me for a few hours and I'm not sure what to do.

I have the default code for a zurb-foundation accordion with a select menu nested within the accordion panel, as such:

<dl class="accordion" data-accordion>
  <dd>
    <a href="#panel1">Accordion 1. 
      <select>
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
      </select>
    </a>
    <div id="panel1" class="content active">
      Content ... 
    </div>
  </dd>
  <dd>
    <a href="#panel2">Accordion 2</a>
    <div id="panel2" class="content">
      Content .. 
    </div>
  </dd>
</dl>

The above works fine in Chrome. In Firefox, however, the first click will expand the select menu, but when you try and click again to select an item it loses focus, nothing is selected, and you can't click the select button again.

I thought it might have to do with click bubbling, but my attempts to use event.stopPropagation() and event.preventDefault() on both the select and option elements have not changed anything.

EDIT -- http://jsfiddle.net/V7bTH/4/ This Jsfiddle works great in Chrome, fails in Firefox. (I couldn't get my original foundation 5 code working in jsfiddle for some reason, but here's the same problem w/ some different code)

Answer 1

Problem: Use of select inside a is not right HTML because a is a inline element. if you go to this simple fiddle http://jsfiddle.net/3bt8Q/ it will also not work for the same reason in firefox, but it works in chrome because chrome handles it explicitly but its not right html

Solution: You should use the container to be other than a or just use absolute positioned element

DEMO - http://jsfiddle.net/V7bTH/6/

html

<div class="row">
    <div class="large-12 columns">
        <h2>Accordion</h2>
        <div class="section-container accordion" data-section="accordion">

            <section class="qw">
                <select id="select">
                            <option value="volvo">Volvo</option>
                            <option value="saab">Saab</option>
                            <option value="mercedes">Mercedes</option>
                            <option value="audi">Audi</option>
                          </select>
                <p class="title">

                    <a href="#tab-1">Tab 1

                    </a></p>
                <div class="content" data-slug="tab-1">
                    <h3>Here's a Title</h3>
                    <p>Here's a description</p>
                </div>
            </section>
            <section>
                <p class="title"><a href="#tab-2">Tab 2</a></p>
                <div class="content" data-slug="tab-2">
                    <h3>Here's a Title</h3>
                    <p>Here's a description</p>
                </div>
            </section>
            <section>
                <p class="title"><a href="#tab-3">Tab 3</a></p>
                <div class="content" data-slug="tab-3">
                    <h3>Here's a Title</h3>
                    <p>Here's a description</p>
                </div>
            </section>
        </div>
    </div>
</div>

css

.qw{
 position: relative;
}
#select{
    width:100px;
    position: absolute;
    top: 10px;
    left: 100px;
}