RWSmith Designs.

Extraordinary Web Design

How to create a CSS only drop down navigation

Drop down navigation systems have been around for a long time, most of these relying upon Javascript.  Here I demonstrate how to create one with only CSS.

Firstly we need to create an un-ordered list in the HTML. The sub navigation menus will be nested inside the corresponding parent ‘li’ element. This keeps things semantically correct and readable by screen readers.

The above un-styled HTML will give us:

  • PARENT 1
  • PARENT 2 V

    • CHILD 1
    • CHILD 2
    • CHILD 3 >
      • GRAND CHILD 1
      • GRAND CHILD 2
    • CHILD 4
    • CHILD 5
  • PARENT 3
  • PARENT 4
  • PARENT 5

Now to add some CSS and make this nav functional.

Result

  • PARENT 1
  • PARENT 2 V
    • CHILD 1
    • CHILD 2
    • CHILD 3 >
      • GRAND CHILD 1
      • GRAND CHILD 2
    • CHILD 4
    • CHILD 5
  • PARENT 3
  • PARENT 4
  • PARENT 5

In the next post I will show how you can make the menu a little more user-friendly and give it some further styling to make it look cool!

Comments

Leave a comment

Your email address will not be published. Required fields are marked *

RWSmith designs Extraordinary Web Design

Do you have a project in mind?

I’m currently available for freelance and accepting new project requests.

Contact meSee my process