On a recent client project, we decided to use Cufón font replacement on the website’s main navigation. This navigation included some drop-down menus, where the main link was font replaced, but the nested list items were not. We also had a couple of other requirements, and getting them all implemented was harder to pull off than I expected.

In an effort to save my fellow developers some time, I present the following solution.

A working demonstration

Before you get into the solution, you might want to view a working demo. This demo meets all of the requirements laid out in the next section.

The problem

If you’re reading this, chances are good that you have the following three requirements:

• I want to do Cufón font replacement on my main navigation
• Some or all of my navigation items will be drop-downs
• I only want to do font replacement on the top level items; the nested list items should be unchanged

Additionally, I also wanted to do the following:

• Apply a nice text-shadow to replaced text
• Keep top level anchors highlighted while hovering on their drop-downs

The solution

You can view the source code of the demo page, or read on.

The HTML

Your first task is to create a nice, standard, nested list:

<nav> <ul> <li>
         <a href="#">Movies</a>
 <ul> <li>
               <a href="#">2010 Oscar Nominees</a>
 <ul> <li><a href="#">True Grit</a></li> <li><a href="#">Jeff Bridges</a></li>  <li><a href="#">Hailee Steinfeld</a></li> </ul> </li> <li>  <a href="#">2010 Oscar Winners</a>  <ul> <li><a href="#">The King's Speech</a></li> <li><a href="#">Colin Firth</a></li>  </ul> </li> </ul> </li>  <!-- (see demo source code for the rest) -->  </ul> </nav>

The CSS

Next up: some basic styling. This code is also available on the demo page; just view the source code to grab it.

a.fly { background:#b2ab9b url(fly-arrow.gif) 175px center no-repeat; }

li:hover > a { background:#dfd7ca; color:#c00; }

li:hover > a.fly { background:#dfd7ca url(fly-arrow-hover.gif) 175px center no-repeat; }

nav > ul {
   float:left;
   list-style:none;
   margin:0 0 50px;
   padding:0;
   position:relative;
   width:100%;
   z-index:500; }

nav > ul ul { list-style:none; margin-left:0; padding:0; }

nav > ul li { float:left; position:relative; }

nav > ul a, nav > ul a:visited {
   background:#b2ab9b;
   border:1px solid #fff;
   border-width:0 1px 1px 0;
   color:#000;
   display:block;
   font:14px Georgia, Times, serif;
   height:23px;
   line-height:23px;
   padding:5px 20px;
   text-decoration:none;
   width:160px; }

nav > ul ul { display:none; }

nav > ul li:hover > ul { display:block; left:201px; position:absolute; top:0; }

nav > ul > li:hover > ul { left:0; top:34px; }

The JavaScript

Place this code block after your main Cufón scripts (see the documentation):

Cufon.replace('nav > ul > li', {
   fontFamily: 'Adelle Basic Rg',
   hover: true,
   hoverables: { li: true },
   ignore: { ul: true },
   textShadow: '1px 1px #fff' });

Everything explained

• The Cufon.replace() function above uses the CSS child selector to target the top level list items in your main <ul>. 
• The fontFamily option tells Cufón which font to use. This is only required if you are using Cufón to replace more than one font.
• By default, Cufón does not respect CSS hover properties, so we enable it by setting hover to true.
• Without the hoverables option, the top level links will retain their hover styling after hovering over a submenu and then leaving.
• The child selector alone is not enough; Cufón will replace all of your list items, so we tell it to ignore nested lists.
• Finally, we add a little textShadow. We do this here because Cufón will not read it from our CSS.

Remember that Cufón does not support the “blur” option of text-shadow, which means you’ll have to settle for relatively hard-looking shadows. In the code block above, I’ve only specified the X- and Y-offset and the shadow color.

This code has been tested in Firefox 4, IE 8, Chrome 10, and Safari 4.