I have tried reading through other questions about this but unable to find a fix for it. Hopefully someone can tell me why this is happening and help me fix it? I have my menubar that shows the dropdown menu when I put my mouse on it, but when I move the mouse down to the dropdown menu (outside the menubar) the dropdown menu disappears. I’m using PHP to dynamically get the list of menu items from my MySQL database.
Also note that I’m using a miniature version of tailwind: https://giftsquirrel.com.au/assets/tailwind.css
Please see my codes below.
CSS:
.red-section {
position: relative;
}
.topnav {
overflow: visible;
background-color: #333;
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding-left: 3rem;
padding-right: 3rem;
display: block;
align-items: center;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
position: relative;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #04AA6D;
color: white;
}
.topnav .icon {
display: none;
background-color: yellow;
}
@media screen and (max-width: 768px) {
.topnav a:not(:first-child) {display: none;}
.topnav a.icon {
float: right;
position: absolute;
top: 10px;
right: 10px;
color: white;
font-size: 24px;
display: block;
}
.topnav.responsive {
position: relative;
display: block;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav {
display: none;
}
}
@media screen and (min-width: 769px) {
.topnav .icon {
display: none;
}
.topnav a:hover .dropdown-content {
display: block;
}
.dropdown {
float: left;
overflow: hidden;
position: relative;
display: inline-block;
}
.dropdown a {
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
margin: 0;
}
.dropdown-content {
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 .dropdown-content {
visibility: hidden;
opacity: 0;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {
background-color: #ddd;
}
.dropdown:hover .dropdown-content {
display: block;
}
}
HTML/PHP:
<section class="red-section pb-8 md:pb-32 px-5 z-50 bg-slate-900 overflow-visible relative text-white" style="background-color: #ef4444 ">
<div class="flex gap-2 items-center">
<a href="https://giftsquirrel.com.au/" class="font-semibold text-4xl hover:text-gray-600">Gift Squirrel</a>
</div>
<div class="[&>*]:mb-12 [&>*]:-z-10 [&>*]:absolute [&>*]:right-0 [&>*]:top-0 [&>*]:mx-auto [&>*]:text-white [&>*]:md:h-[120%] [&>*]:mix-blend-plus-lighter [&>*]:opacity-30">
<div style="background-image: url('images/giftsquirrel-logo.gif'); background-size: cover; filter: grayscale(70%); opacity: 0.3; width: 400px; height: 400px; margin-right: 10%; margin-top: 50px"> </div>
</div>
<div class="flex flex-col max-w-7xl py-12 pt-32 mx-auto">
<h1 class="text-5xl sm:text-7xl lg:text-8xl max-w-5xl font-custom font-bold">
<div class="image-text-container" style="display:flex; align-items:center">
<div class="image-container" style="margin-right: 20px">
<img src="images/squirrel.png" alt="Gift Squirrel squirrel" style="max-height:75px; max-width:75px">
</div>
<div class="text-container">
<h1>Gift Squirrel</h1>
</div>
</div>
</h1>
<div>
<div x-on:click=toggle('hero')>
<p class="sm:leading-relaxed max-w-2xl text-2xl mt-8">
Our Finds for Every Occasion
</p>
</div>
</div>
</div>
<nav class="mx-auto w-full justify-between px-4">
<div class="topnav text-xl font-medium gap-10" id="myTopnav">
<a href="#home" class="active">Home</a>
<?php
foreach ($categories as $category) {
if ($category['parent_id'] === NULL) { // Main category
echo '<div class="dropdown">';
echo '<a href="#' . strtolower(str_replace(' ', '', $category['name'])) . '">' . $category['name'] . '</a>';
echo '<div class="dropdown-content">';
foreach ($categories as $subcategory) {
if ($subcategory['parent_id'] == $category['id']) { // Subcategory
echo '<a href="index.php?category=' . urlencode($subcategory['name']) . '">' . $subcategory['name'] . '</a>';
}
}
echo '</div>'; // Close dropdown-content
echo '</div>'; // Close dropdown
}
}
?>
<a href="#posts">All Posts</a>
<a href="#faq">FAQ</a>
<!-- Search Form -->
<form id="searchForm" action="search.php" method="GET" class="ml-auto">
<input type="text" name="search" placeholder="Search..." class="border rounded px-2 py-1 focus:outline-none focus:ring focus:border-blue-300 max-w-xs">
<button type="submit" class="bg-blue-500 text-white rounded px-3 py-1 hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300">Search</button>
</form>
</div>
</nav>
</section>
If anyone else comes across this, the problem is with tailwind: “isolate relative” class. Took me hours to track this down… Just remove “isolate” from tailwind CSS (I’ve commented it out) and it works fine.