Scrolling with a styled unordered list (select box replacement)

Question

My company had a website we're working on redone by a designer. It looks much better, but I've hit a snag implementing their design in HTML+CSS. They have a heavily styled <select> box, so much so that I couldn't recreate it with pure CSS. I found a solution that uses Javascript to replace the <select> box with a <ul>. This works almost perfectly, but there are two problems with it:

1. It doesn't scroll when there are many elements.
2. It doesn't close when you click outside of the dropdown.

I've played around with it in Firebug, but becuase the <li>s are styled with display:block, they don't seem to be contained by the surrounding <ul>, which means I can't set a maximum height.

Issue #2 is not as important, but it would be nice to know how to fix that as well.

Here's a link to the problem page: http://www.truwindshield.com/test2/

Answer 1

Since you're using jQuery and the solution isn't, you could consider replacing it with a relevant jQuery plugin. This one seems to be working and degrading nicely: jQuery SelectBox

This implementation also solves the two issues you're having and might save you some working trying to hack the other solution into doing what you want it to.