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 `id=customDropdown` (see html below) is a hidden field on the page that is used to build a `data-id=1391787504820-vf4ww`. That data-ID is then used by the the div class `<div class="custom dropdown" large data-id="1391787504820-vf4ww">`.

I could use the `JavascriptExecutor` to make the `id=customDropdown` visible and then use the `Webdriver Select()` 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 `<div class="custom dropdown" large data-id="1391787504820-vf4ww">`? 

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. 

```
<!DOCTYPE html>
<html>
<body>    
  <h1>The customDropdown ID is a hidden field on that page</h1>
  <div class="columns" style="width: 29.5em;">
    <select id="customDropdown" class="large hidden-field" data-id="1391787504820-vf4ww">
        <option disabled="" class="italics">Company Name 1</option>
        <option class="accountSelectorOpt" value="madeupvalue1">account name 1</option>
        <option class="accountSelectorOpt" value="madeupvalue2">account name 2</option>
        <option class="accountSelectorOpt" value="madeupvalue3">account name 3</option>
        <option class="accountSelectorOpt" value="madeupvalue4">account name 4</option>
        <option class="accountSelectorOpt" value="madeupvalue5">account name 5</option>
        <option disabled="" class="italics">Company Name 2</option>
        <option class="accountSelectorOpt" value="madeupvalue6">account name 6</option>
        <option class="accountSelectorOpt" value="madeupvalue7">account name 7</option>
        <option disabled="" class="italics">Company Name 3</option>
        <option class="accountSelectorOpt" value="madeupvalue8">account name 8</option>
        <option class="accountSelectorOpt" value="madeupvalue9">account name 9</option>
        <option class="accountSelectorOpt" value="madeupvalue10">account name 10</option>
        <option disabled="" class="italics">Company Name 4 Board</option>
        <option class="accountSelectorOpt" value="madeupvalue11">account name11</option>
    </select>

    <h1>The class "custom dropdown large is the Div that dsiplays the drop down list </h1>  
    <div class="custom dropdown large" data-id="1391787504820-vf4ww">
      <a href="#" class="current"></a>
      <a href="#" class="selector"></a>
      <ul>
        <li class="disabled">Company Name 1</li>
        <li class="selected">account name 1</li>
        <li>account name 2</li>
        <li>account name 3</li>
        <li>account name 4</li>
        <li>account name 5</li>
        <li class="disabled">Company Name 2</li>
        <li>account name 6</li>
        <li>account name 7</li>
        <li class="disabled">Company Name 3</li>
        <li>account name 8</li>
        <li>account name 9</li>
        <li>account name 10</li>
        <li class="disabled">Company Name 4</li>
        <li>account name 11</li>
      </ul>
    </div>
  </div>
</body>
</html>

```