teenybeanspreschoolcurriculum.com/src/components/Menu.astro

<main class="container-fluid  bg-base-100 shadow-md">
    <!-- Desktop Menu -->
<div class="container mx-auto xl:px-24 hidden md:flex place-content-between w-full">
    <div class="flex place-items-center w-fit"> 
        <a href="/"><img class="w-36 h-12 lg:w-fit lg:h-fit hover:bg-none" src="/img/tb-logo.png" alt="Teeny Beans Logo"/></a>
    </div>
    <div class="flex flex-col"></div>
    <div class="flex place-items-center py-4 font-semibold">
        <div class="navbar w-full">
            <a href="/educators">Educators</a>
            <a href="/administrators">Administrators</a>
            <div class="dropdownDesktop">
                <button class="dropbtnDesktop" style="font-family: quicksand;">Resource <span class="text-xs">∇</span>
                <i class="fa fa-caret-downDesktop"></i>
                </button>
                <div class="dropdown-contentDesktop">
                    <a class="" href="/worksheets">Worksheets</a>
                    <a href="/videos">Videos</a>
                    <a href="/audio-books">Audio Books</a>
                    <a href="/lesson-plan/dailyplan">Lesson Plan</a>
                </div>
            </div> 
            <a href="/occasion">Occasion</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="/" class=""><img src="/img/tb-logo.png" alt="Teeny Beans Logo"></a>
        <div id="mobileMenu" class="hidden active">
            <a class="hover:bg-gray-200" href="/educators">Educators</a>
            <a class="hover:bg-gray-200" href="/administrators">Administrators</a>
        <div class="dropdown">
            <button class="dropbtn">Recources <span class="text-xs">∇</span></button>
            <div class="dropdown-content">
                <a href="/worksheets" style="color: white;">Worksheets</a>
                <a href="/videos" style="color: white;">Videos</a>
                <a href="/audio-books" style="color: white;">Audio Books</a>
                <a href="/lesson-plan/dailyplan" style="color: white;">Lesson Plan</a>
            </div>
            </div> 
            <a class="hover:bg-gray-200" href="/occassion">Occassion</a>
            <a class="hover:bg-gray-200" href="/themes">Themes</a>
            <a class="hover:bg-gray-200" href="/blog">Blog</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>
.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: #7c4c23;
    font-weight: bold;
    text-align: center;
    padding: 14px 12px;
    font-family: quicksand;
    text-decoration: none;
}

.dropdownDesktop {
float: left;
overflow: hidden;

}

.dropdownDesktop .dropbtnDesktop {
font-size: 16px;  
border: none;
outline: none;
color: #7c4c23;
font-weight: bold;
padding: 14px 10px;
background-color: inherit;
font-family: inherit;
margin: 0;
}

.navbar a:hover, .dropdownDesktop:hover .dropbtnDesktop {
background-color: #f1f5f9;
border-radius: 8px;
}

.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;
background-color: #1d4ed8;
}

.dropdown-contentDesktop a {
float: none;
color: rgb(255, 255, 255);
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

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

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




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

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





.topnavMobile {
overflow: visible;
background-color: rgb(255, 255, 255);
position: relative;
}


.topnavMobile a, .topnavMobile >div > div {
color: #7c4c23;
font-weight: bold;
padding: 10px 16px;
text-decoration: none;
font-size: 16px;
display: block;
}

.topnavMobile a.icon {
color: white;
background: #1d4ed8;
display: block;
position: absolute;
right: 0;
top: 0;
cursor: pointer;
}

.topnavMobile a:hover {
/* background-color: #1e40af; */
/* color: hsl(0, 0%, 100%); */
background-color: ;
}

.active {
/* background-color: #1e40af; */
color: white;
}


</style>