Dropdown Menu with CSS

    /* Dropdown menu */
    nav ul ul {
      display: none; /* hidden by default */
      position: absolute;
      top: 100%; /* place below parent */
      left: 0;
      background: #eee;
      padding: 0;
      min-width: 180px;
    }
    nav ul ul li a {
      color: #333;
      padding: 0.75rem;
    }
    nav ul ul li a:hover {
      background: #ddd;
    }

    /* Show dropdown on hover */
    nav li:hover > ul {
      display: block;
    }

    ----------------------------------------------

      
  <nav>
    <ul>
      <li><a href="#">Home</a></li>
      <li>
          <a href="#">Services</a>
          <ul>
            <li><a href="#">Web Development</a></li>
            <li><a href="#">Design</a></li>
            <li><a href="#">Consulting</a></li>
           </ul>
       </li>
    </ul>
  </nav>  
  

Understanding the Dropdown CSS

nav ul ul { display: none; }

Nested lists (the dropdowns) are hidden by default so they don’t clutter the page.

position: absolute;

This takes the dropdown out of the normal flow and lets us place it exactly where we want. It will be positioned relative to its nearest ancestor with position: relative; (in this case, the parent <li>).

top: 100%; left: 0;

Moves the dropdown so it sits directly below the parent menu item. top: 100% means “start just below the parent’s bottom edge.” left: 0 aligns it with the left edge of the parent.

background: #eee; min-width: 180px;

Styles the dropdown with a light background and ensures it’s wide enough to look like a menu.

nav ul ul li a { padding: 0.75rem; }

Gives each dropdown link some breathing room so it’s easy to click.

nav ul ul li a:hover { background: #ddd; }

Highlights the link when hovered, giving visual feedback to the user.

nav li:hover > ul { display: block; }

When you hover over a parent list item (like “Services”), its hidden dropdown becomes visible. This is the key rule that makes the menu interactive without JavaScript.