Dropdowns

Dropdown menus are used in CSS to hide a predefined list within a button.
A drop-down is a bunch of lists under an unordered list i.e. <ul> as it is popularly known in the HTML world.
Nested list (<li>) tags under the <ul> tag are used to create a drop-down structure. To bring out the effects use CSS for the components present in the structure.

Example:

<!DOCTYPE html>
<html>
<head>
    <title>Dropdown property</title>
</head>
<body>
    <nav>
        <ul>
            <li class="Lev-1">
                <a href="">Level-1</a>
                <ul>
                    <li><a href="">Link 1</a></li>
                    <li><a href="">Link 2</a></li>
                    <li><a href="">Link 3</a></li>
                    <li><a href="">Link 4</a></li>
                </ul>
            </li>
        </ul>
    </nav>
</body>
</html>

Output:

Adding CSS property in HTML structure to create interactive drop-down structure:

Example:

<!DOCTYPE html>
<html>

<head>
   <title>Navigation property</title>
   <style>
      a {
         color: white;
         background-color: #990;
         text-decoration: none;
      }

      nav {
         background: #333;
      }

      nav>ul {
         margin: 0 auto;
         width: 80px;
      }

      nav ul li {
         display: block;
         float: left;
         margin-left: -40px;
         position: relative;
      }

      nav ul a {
         display: block;
         float: left;
         width: 150px;
         padding: 10px 20px;
      }

      nav ul a:hover {
         background: #090;
      }

      nav ul li ul li {
         float: none;
      }

      nav ul li ul {
         display: none;
         position: absolute;
         background: #333;
         top: 42px;
      }

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

      nav ul li a {
         display: block;
      }

      .gfg {
         font-size: 40px;
         font-weight: bold;
         color: #009900;
         Text-align: center;
      }

      p {
         font-size: 20px;
         font-weight: bold;
         text-align: center;
      }
   </style>
</head>

<body>
   <div class="gfg">Quipoin</div>
   <p>Dropdown Navigation property</p>
   <nav>
      <ul>
         <li class="Lev-1">
            <a href="">Level-1</a>
            <ul>
               <li><a href="">Link 1</a></li>
               <li><a href="">Link 2</a></li>
               <li><a href="">Link 3</a></li>
               <li><a href="">Link 4</a></li>
            </ul>
         </li>
      </ul>
   </nav>
</body>

</html>

Output: