If you really want to get fancy and apply some cool effects, you’ll need to apply some JavaScript (or better yet jQuery) techniques.
Navigation Menu HTML Structure
To build our multi-level navigation menu, we are simply going to use an unordered list with sub-lists. Then, we’ll just apply some CSS styling properties to show and hide the second-level items. You can add new second-level sub-items simply by adding new
- tags before you end the main item with an
CSS Code
Without CSS, we have a plain multi-level unordered list. We’ll need to apply some creative styles to transform this into a navigation menu. Here is a summary of the CSS code that we will need. Here is the section of CSS code that makes the sub-items appear when you hover over the first level main items. You first hide the second-level sub-item list by setting the style display:none. Then to make the sub-items appear, you set the style to display:block on the pseudo-class hover on the parent list item.
Third level Menu Items
In this example, we are going to add a third level of menu items. The third level will be placed under the Video sub item. For the third level, we need to add the following CSS styles. You can continue to create additional levels if needed by following the same pattern of hiding and showing on the hover pseudo-class. Once you have built a few menu navigation bars, the concept of formatting an unordered list into a menu tab becomes easier and easier. Once you master this technique, you can perform more advanced effects with the help of JavaScript.
