Simple CSS-only menu
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

Simple CSS-Only Menu

Author: Joni Halabi (


This simple navigation menu demonstrates how to create a main navigation menu with drop down sub-menus using just CSS.

What is in the HTML?

The HTML for the navigation is enclosed in the

tag, which contains 2 levels of navigation:

  1. Level 1 is an unordered list containing only the links in this first level. These links appear as a bar across the top of the navigation. Each element in the list can have a child unordered list.

  2. Level 2 is an unordered list containing the links in this second level. These links appear as a drop down menu below the hovered link in level 1.

What is in the CSS?

This project contains 2 CSS files:

  1. reset.css: Just a basic CSS reset, inspired by the Eric Meyers' CSS reset.

  2. menu.css: Contains the base styles for the menu, including all hover styles. The aesthetics are really basic and monochromatic; this CSS file was written with the idea that the developer end-user can customize the styles to match whatever website you are working on.