Fix to custom dropdown

There is an issue with the logic in foundation.forms. Take standard example:

```
<select id="changedSelectInput">
    <option>Pick One</option>
    <option>Pick One One One</option>
    <option>Pick One One</option>
</select>
```

The custom markup determines it's width by using ``width:inherit``

```js
      //
      // Update the custom <ul> list width property.
      //
      $customList.css( 'width', 'inherit' );
      //
      // Set the custom select width property.
      //
      $customSelect.css( 'width', 'inherit' );
```

Now take this example:

```
<div class="row">
    <div class="six columns end">
        <select id="changedSelectInput">
            <option>Pick One</option>
            <option>Pick One One One</option>
            <option>Pick One One</option>
        </select>
    </div>
</div>
 ```

 The *inherited* width inside a container with ``six columns`` is 50%, so the custom drop down render with a calculated width of 50%. (Tested in Firefox/Windows)

 I propose using ``width:auto`` instead which produces a consistent result for both scenarios.