title: Can't automated a Zurb-foundation Drop down list using Selenium2 webdriver
body: <p>Currently I am having an issue trying to select an item in a drop down list using selenium. The drop down list is using zurb-foundation to style the look of the drop down. The first element select <code>id=customDropdown</code> (see html below) is a hidden field on the page that is used to build a <code>data-id=1391787504820-vf4ww</code>. That data-ID  is then  used by the the div class  <code>&lt;div class="custom dropdown" large data-id="1391787504820-vf4ww"&gt;</code>.</p>
  
  <p>I could use the <code>JavascriptExecutor</code> to make the <code>id=customDropdown</code> visible and then use  the <code>Webdriver Select()</code> class  to select an option but I am not sure if this the correct way to test this functionality. Since an end user would not really interact with the UI this way, I don't think it would be a valid test. So my question is how can I test this by using  <code>&lt;div class="custom dropdown" large data-id="1391787504820-vf4ww"&gt;</code>? </p>
  
  <p>When I click on the selector using CSS, the list displays but I am unable to click on anything in the list using CSS or xpath. I get an error that says element not found.  </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body&gt;    
    &lt;h1&gt;The customDropdown ID is a hidden field on that page&lt;/h1&gt;
    &lt;div class="columns" style="width: 29.5em;"&gt;
      &lt;select id="customDropdown" class="large hidden-field" data-id="1391787504820-vf4ww"&gt;
          &lt;option disabled="" class="italics"&gt;Company Name 1&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue1"&gt;account name 1&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue2"&gt;account name 2&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue3"&gt;account name 3&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue4"&gt;account name 4&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue5"&gt;account name 5&lt;/option&gt;
          &lt;option disabled="" class="italics"&gt;Company Name 2&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue6"&gt;account name 6&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue7"&gt;account name 7&lt;/option&gt;
          &lt;option disabled="" class="italics"&gt;Company Name 3&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue8"&gt;account name 8&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue9"&gt;account name 9&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue10"&gt;account name 10&lt;/option&gt;
          &lt;option disabled="" class="italics"&gt;Company Name 4 Board&lt;/option&gt;
          &lt;option class="accountSelectorOpt" value="madeupvalue11"&gt;account name11&lt;/option&gt;
      &lt;/select&gt;
  
      &lt;h1&gt;The class "custom dropdown large is the Div that dsiplays the drop down list &lt;/h1&gt;  
      &lt;div class="custom dropdown large" data-id="1391787504820-vf4ww"&gt;
        &lt;a href="#" class="current"&gt;&lt;/a&gt;
        &lt;a href="#" class="selector"&gt;&lt;/a&gt;
        &lt;ul&gt;
          &lt;li class="disabled"&gt;Company Name 1&lt;/li&gt;
          &lt;li class="selected"&gt;account name 1&lt;/li&gt;
          &lt;li&gt;account name 2&lt;/li&gt;
          &lt;li&gt;account name 3&lt;/li&gt;
          &lt;li&gt;account name 4&lt;/li&gt;
          &lt;li&gt;account name 5&lt;/li&gt;
          &lt;li class="disabled"&gt;Company Name 2&lt;/li&gt;
          &lt;li&gt;account name 6&lt;/li&gt;
          &lt;li&gt;account name 7&lt;/li&gt;
          &lt;li class="disabled"&gt;Company Name 3&lt;/li&gt;
          &lt;li&gt;account name 8&lt;/li&gt;
          &lt;li&gt;account name 9&lt;/li&gt;
          &lt;li&gt;account name 10&lt;/li&gt;
          &lt;li class="disabled"&gt;Company Name 4&lt;/li&gt;
          &lt;li&gt;account name 11&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>