From a hierarchical point of view I think the main navigation should be placed at the bottom of the HTML file. There are some situations where a different location is chosen or needed. In those cases you can use this more pattern for your navigation where on a small screen the less important parts of your navigation are revealed with a click on a More-button.
You could probably make it work with a correct hierarchy although it will be harder to push the rest of the content down when you click on More. It might work with the technique described here: http://adactio.com/journal/4780/ but I haven't tried it.
You could use position:absolute to lay the rest of the navigation over the content, you should thoroughly test if that isn't disorienting on a small screen.
The biggest issue with this solution is of course the exact amount of navigational items you want to show on certain screen sizes. This specific example always shows at least three items, which will be an issue on small screens. A clever script could be written that shows the amount of items that fit on screen. Feel free to contribute.