Have you noticed one thing? Throughout this chapter all of the menu examples are vertical. This is not through pure chance, but simply because the menu widget, at the time of writing, doesn't yet have an option to create a horizontal menu.
It's not a problem though, as it is easy enough to create one using the power of the position widget and a little extra styling. In this example, we'll take a look at how to achieve this effect, while updating it for jQuery Version 2.
Note
Lots of people have attempted doing it, with varying degrees of success—my personal favorite is the version produced by Aurélien Hayet, and which we will use in this example. If you want to see the original article by Aurélien Hayet (in French language), then it is available at http://aurelienhayet.com/2012/11/03/ comment-realiser-un-menu-horizontal-a-laide-de-jquery-ui/.
Remove the existing menu markup in
menu2.html, and replace it with the following, saving it as menu10.html:
<body> ...