THIS is a duplicate of the Display two options within select box side by side
I'm utilising JQuery Selectric plugin for select elements using untouched default css provided for the plugin. All looks fine except that the dropdown list never shows one option under another as you always expect but rather they show side by side on one row. Even as I reduce the width of the element, they never show normally.
In other words, they show as follows.
SELECT BOX
Option1 Option2 Option3 Option4 etc
The select is within a div that is float:left but no matter what style I try to add to the element, the options never show properly. They are, however, properly separate choices with correct mouseover effects etc - just side by side not one under other.
Any ideas how I can get the element to show in the standard vertical listing format?
Thanks.
HTML is as simple as I've suggested.
<select>
<option value="1">Apples</option>
<option value="2">Bananas</option>
<option value="3">Peaches</option>
<option value="4">Pears</option>
</select>
The containing divs are as follows
<div id="page">
<div id="main">
<div id="info">
</div>
</div>
</div>
Styles as follows
div#page {position:absolute;left:0px;right:0px;top:110px;width:100%;}
div#main {margin:auto;left:0px;right:0px;text-align:left;max-width:1100px;padding-left:20px;padding-right:20px;}
div#info {float:left;width:46%;margin-left:4%}
Through a process of elimination it seems that the CSS Flex styling for 'ul' elements caused this behaviour. So I guess if you actually want this to happen then use display:flex etc to mess with the dropdown options.