How to Create Specialized CSS3 Menu Effects

By John Paul Mueller

The basic CSS3 menu is nice, but there are still some fit-and-finish changes you can make. One that’s especially important is to define the title attribute for each of the menu entries.

For example, you might simply use title=”Go to the Home Page” for the Home button. Adding the title attribute provides the viewer with a tooltip when hovering the mouse cursor and also provides input for people using screen readers.


The menu doesn’t provide a quick method for changing the text color or anything about the font used to display it. As with other examples, you can use various kinds of CSS changes to affect the appearance of text in the menu.

The buttons rely on the .splitmenubutton style to create the text appearance; the submenus rely on the ul.splitdropdown li a style. Try making these changes to the example styles and you’ll see the interplay between the various split button menu elements.

 color: Yellow;
ul.splitdropdown li a
 color: DarkOrchid;
 background: Lavender;

It’s possible to modify the split button menu to meet any need you might have. The important thing to remember is to make as many changes as possible outside of the original files. Making changes to the files will cause you problems at some point because Dynamic Drive will likely make updates to the examples.