WordPress 3 has brought forth some new tricks like the customizable navigation menus which make it very easy to set up your own menus using a GUI. You can define and drag-and-drop the order of the menu items, and WordPress will output them as an unordered list (<ul><li>…</li></ul>).

Rather than try to explain it myself, just head over to Justin Tadlock’s post about the menus.

One missing piece was filled by John The Developer where I needed to add a custom class to the last menu item.  I was displaying a menu horizontally and using “margin-right” to space the menu items (inside <li> tags) apart, but I didn’t want that margin on the last item.  Here is John’s 8 lines of code solution.

Then in my CSS file, I defined “last-item” class as:

li.last-item {
     margin-right: 0 !important;
}

I did try using the pseudo-class of li:last-child which worked fine in Chrome and Firefox, but it did not work for Internet Explorer because IE has yet to recognize pseudo-classes.

Update Bonus: Want to add some collapsing menu goodness? Check out Daneomatic.com’s post.