Problem z listą select

pytanie zadane 19 czerwca 2018 w HTML i CSS przez Erichu Nowicjusz (230 p.)

Witam,

Tworzę właśnie serwis biblioteczny. Napotkałem jednak pewien problem: Lista rozwijana 'select' na mojej witrynie rozwija się do góry. Nie wiem jak to zmienić, a na forum nie znalazłem podobnego problemu. Z góry dziękuję za pomoc.

kod html:

<form id="form" method="post">
             <select name="kategoria" id="kategoria" size="1">
				<option value="" disabled selected>KATEGORIA</option>
				<option value="film">FILM</option>
				<option value="muzyka">MUZYKA</option>
				<option value="popularnonaukowe">POPULARNONAUKOWE</option>
				<option value="historyczne">HISTORYCZNE</option>
				<option value="sci-fi">SCI-FI</option>
				<option value="szkolne">SZKOLNE</option>
				<option value="poezja">POEZJA</option>
				<option value="obyczajowe">OBYCZAJOWE</option>
				<option value="słowniki">SŁOWNIKI</option>
				<option value="komiksy">KOMIKSY</option>
				<option value="albumy">ALBUMY</option>
				<option value="kuchnia">KUCHNIA</option>
				<option value="turystyka">TURYSTYKA</option>
				<option value="atlasy">ATLASY</option>
				<option value="przygodowe">PRZYGODOWE</option>
				<option value="kryminał">KRYMINAŁ</option>
				<option value="sensacja">SENSACJA</option>
				<option value="inne">INNE</option>
			</select>
</form>

A tu css:

select{font-family: 'Oswald', sans-serif; text-align:center; font-size:20px;}
#form{text-align:center; margin:auto;background-color:#ffffff; width:250px; margin-top:200px; height:335px;}