How ro create menu bar

<!DOCTYPE html>
<html>
    <head>
        <title>Menu Bar design</title>
        <link rel="stylesheet" href="style.css">
<style>
*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
body{
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-color: #f4f4f4;
    padding: 30px;
}
h1{
    text-align: center;
    color: #333;
}
.navbar{
    overflow: hidden;
    background-color: #333;

}
.navbar a{
    float: left;
    font-size: 16px;
    color: #ffffff;
    text-align: left;
    padding: 14px 20px;
    text-decoration: none;
}
.dropdown{
    float: left;
    overflow: hidden;
}
.dropdown .dropbtn{
    font-size: 16px;
    color: #ffffff;
    border: none;
    outline: none;
    padding: 14px 20px;
    background-color: transparent;
    cursor: pointer;
    font-weight: bold;
}
.dropdown-content{
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 212px;
    z-index: 1;
}
.dropdown-content a{
    float: none;
    color: #ffffff;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    background-color: #0a5f02;
}
.navbar a:hover, .dropdown:hover .dropbtn{
    background: #1c8704;
}
.dropdown-content a:hover{
     background: #1c8704;
}
.dropdown:hover .dropdown-content{
    display: block;
}
</style>
    </head>
    <body>
        <h1 class="mut">Menu Bar design</h1>

        <div class="navbar">
            <a href="#">Home</a>
            <a href="#">About Us</a>
            <a href="#">Contact Us</a>

            <div class="dropdown">
                <button class="dropbtn">About Us Dropdown &#11163;</button>

                <div class="dropdown-content">
                    <a href="#">Director</a>
                    <a href="#">Precident</a>
                    <a href="#">Mission</a>
                    <a href="#">Vision</a>
                    <a href="#">Committee</a>
                </div>
            </div>

            <div class="dropdown">
                <button class="dropbtn">Gallery &#11163;</button>
                <div class="dropdown-content">
                    <a href="#">Photo Gallery</a>
                    <a href="#">Video Gallery</a>
                </div>
            </div>
        </div>


            <style>
                .red-box{
                    width: 150px;
                    height: 150px;
                    background-color: red;
                    margin-top: 15px;
                    z-index: 2;
                    position: relative;
                }
                .green-box{
                    width: 150px;
                    height: 150px;
                    background-color: green;
                    margin-top: 15px;
                    top: -150px;
                    left: 20px;
                    position: relative;
                    z-index: 1;
                }
            </style>

            <div class="red-box"></div>
            <div class="green-box"></div>


    </body>
</html>