Time for action – customizing Superfish menus

Customizing a Superfish menu mostly involves writing your own CSS code to style the menu the way you'd like. The following steps show how we'll create a custom look for the menu:

1. If you remember some web basics, you'll remember that CSS stands for Cascading Style Sheets. This cascading feature is what we'll focus on here. Any styles we write for the top level of our menu are going to cascade down to the other levels of the menu. We have to remember this and handle all the cases where we'd rather stop a style from cascading downward.

   We'll keep working with the same index.html file, but we won't need the superfish.css or superfish-vertical.css files any longer. We'll now attach our styles.css file to the index.html file to apply all of our default styles. Let's get started by writing some general styles for the menu container and other elements. Place the following code inside your styles.css file:

   /* General */
   
   nav {
     margin: 2em 0;
   }
   
   .sf-menu...