How to Style CFMenu using CSS

Related to: ColdFusion 8.01, cfmenu, css

Let’s cut to the chase. Styling cfmenu can be a freakin’ pain in the ass. The Adobe docs are virtually useless in this respect. The tag itself renders differently with respect to different versions of the JRE you may be running. For example, we upgraded from CF8 to CF8.01 and found that our cfmenu tags had lost their style!

The following is the result of my efforts over the past few hours to get our menu looking like it did before the upgrade. I’ve basically boiled it down to the bare minimum set of styling requirements to be able to manipulate cfmenu to your liking.

Here is all you need to make cfmenu look respectable.

What should my cfmenu tag look like?

The only thing it needs are:

1. a name
2. a type
3. a selectedItemColor

What should my cfmenuitem tag look like?

You don’t need to specify any style information or attributes within the cfmenuitem tag, this will all be handled within your style sheet.

What should my style sheet look like?

This is a sample style sheet that will style the most desired aspects of the cfmenu tag.


#myMenu {
margin: 0;
padding: 0;
background: #E3EAFA;
height: 30px;
}

#myMenu li a {
padding: 7px 15px 7px 15px;
text-decoration: none !important;
}


That’s it! Notice the hierarchy of:


cfmenu > unordered list > list item > anchor link


That’s really the key.

Additional Notes

The Yahoo UI (that generates and controls the menu in the background) likes to underline links. Notice that I had to use the CSS “!important” declaration to remove the underlines.

I hope this helps you in some way.