Here is how I included the flags in the WordPress 3 menu.

The following article is inspired by this one http://www.ivorpadilla.net/cuztomizing-wordpress-custom-menu-icons/.

Indeed, you must first setup these classes « francais » and « english » in the menu creation part as indicated in the article.

alternative css in wordpress 3 menu

You have to input the classe in the Classes CSS (facultitaive) so it is understood by the web in CSS.

The attribut is optionnal, I put it but I could have put nothing ….

Of course, the images have previously been copied in the theme folder. Here, it is twentyten\images.

You have to modify the theme stylesheet style.css by adding :

#access li.francais a{
background: url(images/fr_FR.png) center left no-repeat;
padding-left: 18px;
}
/*background: url(images/wordpress.png) center left no-repeat;*/
#access li.francais a:hover {
background: url(images/fr_FR.png) center left no-repeat;
background-color: #333;
color: #fff;
}
#access li.english a {
background: url(images/en_US.png) center left no-repeat;
padding-left: 18px;
}
#access li.english a:hover {
background: url(images/en_US.png) center left no-repeat;
background-color: #333;
color: #fff;
}

Well, you can see I did not fully follow the indications of the previous article. The author wrote to add « #header ul.navigation li.about » which is in our example : « #header ul.navigation li.francais », it is not an issue as long as we indicate the right informations in style.css

Voila, I hope this would have helped you !!

Txia