Time for action – creating a vertical fly-out menu

Switching from a horizontal drop-down menu to a vertical fly-out menu couldn't be easier. We'll use the same HTML markup and our JavaScript code will stay the same. The only difference we'll need to make is to add some new CSS to make our menu display vertically instead of horizontally. We can keep working with the same files we used in the last example. Perform the following steps to create a fly-out menu:

1. In the css folder of the Superfish download, you'll find a file named superfish-vertical.css. Copy that file to your own styles folder. In the head section of the HTML file, we'll attach the new CSS file, after superfish.css, as shown in the following code:

   <link rel="stylesheet" href="styles/superfish.css"/>
   <link rel="stylesheet" href="styles/superfish-vertical.css"/>
   

2. Now, inside your index.html file, find the <ul> element that holds the entire menu and add a class of sf-vertical:

   <nav>
     <ul id="sfNav" class...