I don't think this is possible with CSS.

However, you can make three selects and use javascript to make sure just one of them is selected.

Here is a simple example how to do it with jQuery:

$('.columnselect').click(function()
{
    var id = $(this).attr('id');
    $('.columnselect:not([id="' + id + '"]) option:selected').attr('selected', false);
})

See http://jsfiddle.net/eJmgz/

If you like to have multi select just remove the Javascript code.

The jQuery gentleSelect plugin does exactly what you're looking for :-) http://shawnchin.github.com/jquery-gentleSelect/

It makes it really easy to render Select and MultiSelect elements in multiple columns/rows, and gives you complete control over the layout and design. Much easier than trying to do this in CSS ;-)

No – you can not style the select drop downs using just CSS (there are a few exceptions for Google Chrome) because they are part of the operating system, not the Browser.

You can however use JavaScript (there are a few really good jQuery plugins out there, as this one: uniformjs) where you essentially hide the original select drop down, and replace it with a <li>-list or another element of your choice – which you can style.