Using CSS Drop Down Menus for your Website
Using Drop Down Menu Bars for websites is a common and effective way to logically present your site links to your visitors. If you are considering a drop down menu for your website, make sure that you thoroughly research your options before you spend your time and/or money.
There are are hundreds of options for menu bar design, but be cautious of considerable difference in the rendering of the menu bar across the different web browsers that will have a negative impact on your website’s effectiveness. Typically the issue is that the menu bars are CSS based, which makes it virtually impossible to get identical rendering across the variety of browsers available. There are several menu bars that met a fair, qualifying criteria:
1. No (or very low) cost
2. Cross-browser compatibility
3. Minimal code
4. Easy to install
5. Easy to follow html code (well commented and logical flow)
After several hours of research and testing, I settled on Chrome CSS Drop Down Menu. While it isn’t perfect, it did well in meeting my overall criteria. The cost is free (a couple of lines of reference/backlink are required in the header source code for use) which, of course, scores a 5-star rating.
This drop down menu bar performed consistently with IE, Firefox, and Safari (only the latest versions were tested). My only issue was an overrun of the hover color that covered the right-side border on the drop-down menus. Most people probably wouldn’t notice or care, but I thought I should point it out.
The code to install on the HTML pages is minimal and easy to understand. A server-side JavaScript file handles the back-end functions of the menu bar and needed no editing. The CSS page was well commented and easy to edit. I simply had to change the menu bar color gifs to match the websites and I was ready to go.