My Project

by Yurael

HTML

<!DOCTYPE html>

<html lang="en">

<head>
    <meta charset="utf-8">
    <title>The HTML5 Herald</title>
    <meta name="description" content="The HTML5 Herald">
    <meta name="author" content="SitePoint">

    <link rel="stylesheet" href="test.css">
    <script src="test.js" defer></script>
</head>

<body>
    <ul class="nav">
        <li>Home</li>
        <li class="nav-menu">Menu1
            <ul class="nav-dropdown">
                <li>Example1</li>
                <li>Example2</li>
                <li>Example3</li>
            </ul>
        </li>

        <li class="nav-menu">Menu2
            <ul class="nav-dropdown">
                <li>Example1</li>
                <li>Example2</li>
                <li>Example3</li>
            </ul>
        </li>
    </ul>
</body>

</html>

CSS

/*Block*/
.nav li {
    display: inline-block;
    list-style: none;
    color: black;
    width: 100px;
    height: auto;
    border: 1px solid red;
    font-size: 20px;
    text-align: center;
}


/*Element*/
.nav-dropdown {
    display: none;
    position: absolute;
}

.nav-dropdown li {
    position: relative;
    display: flex;
    left: -40%;
}

.show {
    display: block;
}

JavaScript

function dropDownMenu() {
    var btnNav = document.querySelector('.nav-menu');
    var dropSub = document.querySelector('.nav-dropdown');

    btnNav.addEventListener('click', function () {
        dropSub.classList.toggle('show');
    })

}
dropDownMenu();