After having our company website redesigned by a professional designer, our site now looks much more visually appealing. However, I have encountered difficulties when trying to implement their design using HTML and CSS. One particular challenge is the heavily styled <select> box that the designer created. Despite my efforts, I was unable to replicate it using only CSS. Fortunately, I came across a helpful solution that involves using Javascript to replace the <select> box with a <ul>. Although this solution works well, there are two issues that need to be addressed:
- When there are a large number of elements, the list does not scroll.
- The dropdown does not close when clicking outside of it.
While I have attempted to troubleshoot using Firebug, I have run into a roadblock. The styling of the <li> elements, which are set to display:block, does not appear to be contained within the surrounding <ul>. This limitation prevents me from setting a maximum height for the list.
Although the second issue is less critical, it would still be beneficial to find a solution. Here is the link to the problematic page: