As with the other example turn images off, or css off, or both off and the navigation text will still appear and make sense.
The drawbacks are the extra span required to produce the image in either of the cases specified above.
The background image in the span is placed absolutely so that sits on top of the text. If styles are disabled the image disappears and the text is revealed. If images are disabled then the text still shows through. If both images and css are turned off then the text still appears as normal.
Other replacement methods that move the text off screen or use display;none etc will fail when images are off but css is still on. The above method doesn't suffer from this problem and users will always get something.
Screen readers will still read the text as it is in the code in the normal place.
The main drawbacks are the extra non-semantic span and the fact that you can't use this technique with transparent images otherwise you would see the text underneath (although in some cases you could shim another inage beteen the text and the replacement image but then it's adding more code and you lose the advantage of not using an image in the first place). Unfortunately some compromises have to be made to make the effect work and after all nothing is perfect!
View source for the full code as the CSS is in the head