teenybeanspreschoolcurriculum.com/src/components/Menu2.astro

<main class="container-fluid navbar">
    <!-- Desktop Menu -->
<div class="container mx-auto flex justify-center">
    <div class="hidden md:block  py-4">
        <div class="navbar">
            <a href="#home">Educators</a>
            <a href="#news">Administrators</a>
            <div class="dropdownDesktop">
                <button class="dropbtnDesktop">Recources 
                <i class="fa fa-caret-downDesktop"></i>
                </button>
                <div class="dropdown-contentDesktop">
                    <a href="#">Worksheets</a>
                    <a href="#">Videos</a>
                    <a href="#">Audio Books</a>
                    <a href="#">Lesson Plan</a>
                </div>
            </div> 
            <a href="occassion">Occassion</a>
            <a href="themes">Themes</a>
            <a href="blog">Blog</a>
        </div>
    </div>
</div>

<!-- Mobile Menu -->
<div class="mobileTopMenu block md:hidden">
    <div class="topnavMobile">
        <a href="#home" class="active">Logo</a>
        <div id="mobileMenu" class="hidden flex flex-col ">
            <a href="#news">Educators</a>
            <a href="#contact">Administrators</a>
            <div class="dropdown ">
                <h2 class="dropbtn text-center" >Dropdown &#11183</h2>
                <div class="dropdown-content">
                    <a href="#">Link 1</a>
                    <a href="#">Link 2Link 2Link 2</a>
                    <a href="#">Link 3</a>
                </div>
            </div> 
            <a href="#about">About</a>
            <a href="#about">About</a>
            <a href="#about">About</a>
            <a href="#about">About</a>

        </div>
        <a  class="icon" onclick="openMobileMenu()">
        &#9776;
        </a>
    </div>
</div>
</main>



<script is:inline>
function openMobileMenu() {
var element = document.getElementById("mobileMenu");
element.classList.toggle("hidden");
}

</script>

<style>
.dropbtn{
    margin: 0 auto;
}
.navbar {
overflow: hidden;
background-color: rgb(150, 39, 39);
/* position: absolute;
width: 100%;
left: 0;
top: 0; */
}

.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

.dropdownDesktop {
float: left;
overflow: hidden;

}

.dropdownDesktop .dropbtnDesktop {
font-size: 16px;  
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
background-color: red;
}

.dropdown-contentDesktop {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

.dropdown-contentDesktop a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-contentDesktop a:hover {
background-color: #ddd;
}

.dropdownDesktop:hover .dropdown-contentDesktop {
display: block;
}




/* .mobileTopMenu{
position: absolute;
top:0;
left:0;
width:100%;
} */
.dropdown:hover .dropdown-content {
display: block;
background-color: #ddd;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}

.dropdown-content a {
float: none;
text-decoration: none;
display: block;
text-align: left;
}





.topnavMobile {
overflow: hidden;
background-color: #333;
position: relative;
}


.topnavMobile a, .topnavMobile >div > div {
color: white;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
display: block;
}

.topnavMobile a.icon {
background: black;
display: block;
position: absolute;
right: 0;
top: 0;
}

.topnavMobile a:hover {
background-color: #ddd;
color: black;
}

.active {
background-color: #aa6204;
color: white;
}


</style>