How to Create a Dropdown Menu in HTML and CSS

Dropdown Menu Tutorial

Menu is an essential part of a website navigation. Effective navigation can help to improve user experience and page views. Menus should to be simple enough for the user to navigate, but also contain the important elements to guide the end user through the entire website.

A CSS dropdown menu provides dynamic and hierarchical view of all main sections on the web page and subsections contained within them. When activated a drops down, it displays a list of values, which allows the user to choose one value from a list.

Horizontal Dropdown Menu

In this section of the CSS tutorial you will learn how to create a Horizontal Menu with SubMenu for your web site. There are many methods that can be used to making a CSS Dropdown Menu, here we make a dropdown menu with CSS list.

Dropdown Menu Demo

Full Source

<!DOCTYPE html>
<html>
<head>
  <style>
    .navigation ul
    {
      list-style-type: none;
    }
    .navigation ul a
    {
      text-decoration: none;
    }
    .navigation ul li
    {
      float:left;
      border : 1px solid black;
      width:80px;
      padding:3px;
      background: orange;
      margin-right:8px;
    }
    .navigation ul li:hover
    {
      background: Bisque;
    }
    .navigation li ul
    {
      display:none;
      position:absolute;
    }
    .navigation li:hover ul
    {
      display:block;
      margin-top:2px;
      margin-left:-45px;
    }
    .navigation li ul li
    {
      clear:both;
      display : block;
      border : 1px solid black;
      padding:3px;
    }
  </style>
  </head>
  <body>
    <div class="navigation">
    <ul>
    <li><a href=".">Home</a></li>
    <li><a href=".">HTML</a>
      <ul>
        <li><a href=".">Tag</a></li>
        <li><a href=".">Link</a></li>
        <li><a href=".">Table</a></li>
      </ul>
    </li>
    <li> <a href=".">CSS</a>
      <ul>
        <li><a href=".">Selector</a></li>
        <li><a href=".">Positioning</a></li>
        <li><a href=".">Box Model</a></li>
      </ul>
    </li>
    <li> <a href=".">Javascript</a>
      <ul>
        <li><a href=".">Dom</a></li>
        <li><a href=".">String</a></li>
        <li><a href=".">Image</a></li>
      </ul>
    </li>
    <li><a href=".">About</a></li>
    </ul>
    </div>
</body>
</html>

Vertical Dropdown Menu

In this section of the CSS tutorial you will learn how to create a Vertical Menu with SubMenu for your web site.

Dropdown Menu Demo

Full Source

<!DOCTYPE html>
<html>
<head>
  <style>
    .navigation ul
    {
      list-style-type: none;
    }
    .navigation ul a
    {
      text-decoration: none;
    }
    .navigation ul  li
    {
      border : 1px solid blue;
      width:100px;
      padding:5px;
      background: orange;
    }
    .navigation ul li:hover
    {
      background: Bisque;
    }
    .navigation li ul
    {
      display:none;
      position:absolute;
    }
    .navigation li:hover ul
    {
      display:block;
      margin-top:-25px;
      margin-left:65px;
    }
    .navigation li ul li
    {
      clear:both;
      display : block;
      border : 1px solid blue;
      padding:3px;
    }
  </style>
</head>
<body>
  <div class="navigation">
  <ul>
    <li><a href=".">Home</a></li>
    <li><a href=".">HTML</a>
    <ul>
      <li><a href=".">Tag</a></li>
      <li><a href=".">Link</a></li>
      <li><a href=".">Table</a></li>
    </ul>
  </li>
  <li> <a href=".">CSS</a>
  <ul>
    <li><a href=".">Selector</a></li>
    <li><a href=".">Positioning</a></li>
    <li><a href=".">Box Model</a></li>
  </ul>
  </li>
  <li> <a href=".">Javascript</a>
  <ul>
    <li><a href=".">Dom</a></li>
    <li><a href=".">String</a></li>
    <li><a href=".">Image</a></li>
  </ul>
  </li>
  <li><a href=".">About</a></li>
  </ul>
  </div>
</body>
</html>