Example of how to create a horizontal drop-down navigation menu with CSS

Source Code: (back to article)

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style-type: none;
        box-sizing: border-box;
      }
      body {
        background: url('https://images.unsplash.com/photo-1532210317995-cc56d90177d9?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80') center;
        background-size: cover;
        min-height: 600px;
        font-family: 'Helvetica Neue', sans-serif;
      }
      nav {
        text-align: center;
      }
      .menu {
        display: inline-block;
      }
      .menu>li {
        float: left;
        color: #e298e1;
        width: 140px;
        height: 40px;
        line-height: 40px;
        background: rgba(0, 0, 0, 0.7);
        cursor: pointer;
        font-size: 17px;
      }
      .sub-menu {
        transform: scale(0);
        transform-origin: top center;
        transition: all 300ms ease-in-out;
      }
      .sub-menu li {
        font-size: 14px;
        background: rgba(0, 0, 0, 0.8);
        padding: 8px 0;
        color: white;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
        transform: scale(0);
        transform-origin: top center;
        transition: all 300ms ease-in-out;
      }
      .sub-menu li:last-child {
        border-bottom: 0;
      }
      .sub-menu li:hover {
        background: black;
      }
      .menu>li:hover .sub-menu li {
        transform: scale(1);
      }
      .menu>li:hover .sub-menu {
        transform: scale(1);
      }
    </style>
  </head>
  <body>
    <nav>
      <ul class="menu">
        <li>
          Italy
          <ul class="sub-menu">
            <li>Rome</li>
            <li>Milan</li>
            <li>Venice</li>
            <li>Lacio</li>
            <li>Florence</li>
          </ul>
        </li>
        <li>
          France
          <ul class="sub-menu">
            <li>Paris</li>
            <li>Bordeau</li>
            <li>Marseille</li>
            <li>Toulouse</li>
          </ul>
        </li>
        <li>
          Spain
          <ul class="sub-menu">
            <li>Madrid</li>
            <li>Valencia</li>
            <li>Barcelona</li>
            <li>Seville</li>
            <li>Bilbao</li>
          </ul>
        </li>
        <li>
          Russia
          <ul class="sub-menu">
            <li>Moscow</li>
            <li>Saint Petersburg</li>
            <li>Tula</li>
            <li>Chekhov</li>
          </ul>
        </li>
        <li>
          Germany
          <ul class="sub-menu">
            <li>Berlin</li>
            <li>Munich</li>
            <li>Frankfurt</li>
            <li>Hamburg</li>
            <li>Dresden</li>
          </ul>
        </li>
      </ul>
    </nav>
  </body>
</html>