index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animated Drop-down Menu CSS3</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
    <nav>
        <label for="btn" class="button">Drop down
            <span class="fas fa-caret-down"></span>
        </label>
        <input type="checkbox" id="btn">
        <ul class="menu">
            <li><a href="#">Home</a></li>
            <li>
                <label for="btn-2" class="first">Features
                    <span class="fa fa-caret-down"></span>
                </label>
                <input type="checkbox" id="btn-2">
                <ul>
                    <li><a href="#">Pages</a></li>
                </ul>
            </li>

            <li>
                <label for="btn-3" class="second">Services
                    <span class="fa fa-caret-down"></span>
                </label>
                <input type="checkbox" id="btn-3">
                <ul>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">App Design</a></li>
                </ul>
            </li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Location</a></li>
        </ul>
    </nav>
</body>

</html>