HTML & CSS Drop-down menu item hover not working

[Malcolm]

Hello Coders!

My buddy of mine is having a troubles with a menu item where when you hover over it a drop down appears. But when you try to click on the drop down the drop down disappears.

I tried adding a delay but I don’t I’m doing it correctly.

[CODE lang="html" title="HTML"]
<div class="sm:flex flex-grow justify-center items-center container mx-auto w-full h-full p-4 sm😛x-0 sm😛y-8">

<section class="w-full sm:w-1/2 md:w-1/3 sm:mx-4 mb-4 relative">

<nav class="flex items-center -mx-4">
<div class="relative">
<a href="#" class="block text-blue text-sm font-bold no-underline mx-4 menu_item">Features</a>
<div class="bg-white text-sm shadow rounded-lg absolute pin-t pin-l mt-10 ml-3 menu_item__sub_menu" style="width:520px">
<svg class="block fill-current text-white w-8 h-8 absolute pin-t pin-l ml-5 -mt-3 z-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 0l12 10h-24z"></path></svg>
<div class="flex flex-wrap justify-between rounded-t-lg p-2">
<a href="#" class="bg-white hover:bg-grey-lighter flex text-grey-dark hover:text-grey-darker no-underline rounded w-1/2 p-6">
<svg class="block flex-none fill-current text-blue hover:text-blue-darkest w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M5 19h-4v-4h4v4zm6 0h-4v-8h4v8zm6 0h-4v-13h4v13zm6 0h-4v-19h4v19zm1 2h-24v2h24v-2z"></path>
</svg>
<span>
<b class="block flex items-center text-blue-dark font-bold">
Engagement
<span class="flex items-center bg-yellow-dark text-yellow-darkest text-xs font-bold uppercase leading-none tracking-wide rounded-full ml-3 py-1 px-2">
<small>NEW</small>
</span>
</b>
<small class="block mt-1">Measure actions users take</small>
</span>
</a>
<a href="#" class="bg-white hover:bg-grey-lighter flex text-grey-dark hover:text-grey-darker no-underline rounded w-1/2 p-6">
<svg class="block flex-none fill-current text-blue w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M15 21c0 1.598-1.392 3-2.971 3s-3.029-1.402-3.029-3h6zm.137-17.055c-.644-.374-1.042-1.07-1.041-1.82v-.003c.001-1.172-.938-2.122-2.096-2.122s-2.097.95-2.097 2.122v.003c.001.751-.396 1.446-1.041 1.82-4.668 2.709-1.985 11.715-6.862 13.306v1.749h20v-1.749c-4.877-1.591-2.193-10.598-6.863-13.306zm-3.137-2.945c.552 0 1 .449 1 1 0 .552-.448 1-1 1s-1-.448-1-1c0-.551.448-1 1-1zm-6.451 16c1.189-1.667 1.605-3.891 1.964-5.815.447-2.39.869-4.648 2.354-5.509 1.38-.801 2.956-.76 4.267 0 1.485.861 1.907 3.119 2.354 5.509.359 1.924.775 4.148 1.964 5.815h-12.903z"></path>
</svg>
<span>
<b class="block text-blue-dark font-bold">Notifications</b>
<small class="block mt-1">Keep customers informed</small>
</span>
</a>
<a href="#" class="bg-white hover:bg-grey-lighter flex text-grey-dark hover:text-grey-darker no-underline rounded w-1/2 p-6">
<svg class="block flex-none fill-current text-blue w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"></path>
</svg>
<span>
<b class="block text-blue-dark font-bold">Rene Lalique</b>
<small class="block mt-1">glass_artist</small>
</span>
</a>
<a href="#" class="bg-white hover:bg-grey-lighter flex text-grey-dark hover:text-grey-darker no-underline rounded w-1/2 p-6">
<svg class="block flex-none fill-current text-blue w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"></path>
</svg>
<span>
<b class="block text-blue-dark font-bold">Glass printing</b>
<small class="block mt-1">Cause widespread panic</small>
</span>
</a>
<a href="#" class="bg-white hover:bg-grey-lighter flex text-grey-dark hover:text-grey-darker no-underline rounded w-1/2 p-6">
<svg class="block flex-none fill-current text-blue w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M23 12c0 1.042-.154 2.045-.425 3h-2.101c.335-.94.526-1.947.526-3 0-4.962-4.037-9-9-9-1.706 0-3.296.484-4.655 1.314l1.858 2.686h-6.994l2.152-7 1.849 2.673c1.684-1.049 3.659-1.673 5.79-1.673 6.074 0 11 4.925 11 11zm-6.354 7.692c-1.357.826-2.944 1.308-4.646 1.308-4.962 0-9-4.038-9-9 0-1.053.191-2.06.525-3h-2.1c-.271.955-.425 1.958-.425 3 0 6.075 4.925 11 11 11 2.127 0 4.099-.621 5.78-1.667l1.853 2.667 2.152-6.989h-6.994l1.855 2.681z"></path>
</svg>
<span>
<b class="block text-blue-dark font-bold">Automations</b>
<small class="block mt-1">Create your own custom rules</small>
</span>
</a>
<a href="#" class="bg-white hover:bg-grey-lighter flex text-grey-dark hover:text-grey-darker no-underline rounded w-1/2 p-6">
<svg class="block flex-none fill-current text-blue w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M24 3.875l-6 1.221 1.716 1.708-5.351 5.358-3.001-3.002-7.336 7.242 1.41 1.418 5.922-5.834 2.991 2.993 6.781-6.762 1.667 1.66 1.201-6.002zm0 17.125v2h-24v-22h2v20h22z"></path>
</svg>
<span>
<b class="block text-blue-dark font-bold">Advanced Reports</b>
<small class="block mt-1">Keep track of your growth</small>
</span>
</a>
</div>
<div class="bg-grey-lighter border-t border-t rounded-b-lg p-6">
<a href="#" class="hover:bg-white flex items-center text-grey-dark hover:text-grey-darker no-underline rounded w-full p-2">
<svg class="block flex-none fill-current text-blue w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M4 22v-20h16v11.543c0 4.107-6 2.457-6 2.457s1.518 6-2.638 6h-7.362zm18-7.614v-14.386h-20v24h10.189c3.163 0 9.811-7.223 9.811-9.614zm-5-1.386h-10v-1h10v1zm0-4h-10v1h10v-1zm0-3h-10v1h10v-1z"></path>
</svg>
<b class="block text-blue-dark font-bold">Angel gliding </b>
<small class="block mt-1 ml-3">Start integrating products for our API</small>
</a>
<a href="#" class="hover:bg-white flex items-center text-grey-dark hover:text-grey-darker no-underline rounded w-full p-2">
<svg class="block flex-none fill-current text-blue w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M14.811 0c2.23 0 3.729 1.684 3.729 3.256 0 1.195-.587 2.117-1.072 2.744h6.531999999999999v5.608c0 1.49-.949 2.169-1.832 2.169-.539 0-1.081-.246-1.526-.691-.314-.329-.442-.546-.846-.546-.45 0-1.256.578-1.256 1.73s.806 1.73 1.256 1.73c.401 0 .533-.218.847-.547.444-.445.986-.691 1.525-.691.883 0 1.832.679 1.832 2.169v7.069h-7.068c-.974 0-1.736-.438-2.04-1.171-.293-.71-.078-1.548.562-2.187.327-.312.546-.446.546-.846 0-.451-.578-1.256-1.729-1.256-1.152 0-1.73.805-1.73 1.256 0 .403.219.532.547.847.639.638.854 1.476.561 2.186-.304.733-1.068 1.171-2.041 1.171h-5.608v-6.531999999999999c-.755.569-1.707 1.073-2.744 1.073-1.572-.001-3.256-1.5-3.256-3.731s1.684-3.73 3.256-3.73c1.037 0 1.989.503 2.744 1.073v-6.153h6.151999999999999c-.485-.627-1.072-1.547-1.072-2.744 0-1.572 1.499-3.256 3.731-3.256zm7.189 8h-4.528c-.974 0-1.736-.438-2.04-1.171-.293-.71-.078-1.548.562-2.187 1.298-1.245.131-2.642-1.183-2.642-1.29 0-2.484 1.397-1.184 2.644.639.638.854 1.476.561 2.185-.303.733-1.066 1.171-2.04 1.171h-4.148v4.148c0 1.49-.949 2.169-1.832 2.169-.539 0-1.081-.246-1.526-.691-1.245-1.298-2.642-.105-2.642 1.184 0 1.231 1.398 2.484 2.643 1.183.893-.893 2.241-.874 2.909 0 .293.384.448.896.448 1.479v4.528h3.612c-.675-.648-1.072-1.167-1.072-2.204 0-1.572 1.499-3.256 3.73-3.256 2.23 0 3.729 1.684 3.729 3.256 0 1.03-.396 1.562-1.073 2.204h5.074v-5.071999999999999c-.647.673-1.165 1.072-2.204 1.072-1.572 0-3.256-1.499-3.256-3.73s1.684-3.73 3.256-3.73c1.036 0 1.562.399 2.204 1.073v-3.613z"></path>
</svg>
<b class="block text-blue-dark font-bold">Staklena umjetnost u 21. stoljeću</b>
<small class="block mt-1 ml-3">Official libraries for our API</small>
</a>
<a href="#" class="hover:bg-white flex items-center text-grey-dark hover:text-grey-darker no-underline rounded w-full p-2">
<svg class="block flex-none fill-current text-blue w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z"></path>
</svg>
<b class="block text-blue-dark font-bold">Open Source</b>
<small class="block mt-1 ml-3">Given back to the community</small>
</a>
</div>
</div>
</div>
<div>
<a href="#" class="block text-blue-darker hover:text-blue-dark text-sm font-bold no-underline hover:underline mx-4">Pricing</a>
<div class="hidden">
<nav>…</nav>
</div>
</div>
<div>
<a href="#" class="block text-blue-darker hover:text-blue-dark text-sm font-bold no-underline hover:underline mx-4">Company</a>
<div class="hidden">
<nav>…</nav>
</div>
</div>
</nav>
</div>
<div class="sm:flex flex-grow justify-center items-center container mx-auto w-full h-full p-4 sm😛x-0 sm😛y-8">

<!-- AFTER DESIGN TIPS -->
<section class="w-full sm:mx-4 mb-4">
<div class="bg-white rounded-lg shadow p-5">
<h1 class="text-purple text-lg uppercase">Polo «+» Mint «+»
City</h1>
<hr class="border-purple-dark border w-10 mx-0 mb-8 mt-3">
<p class="text-grey-darker text-sm leading-normal mb-4">
We've taken all the work out of provisioning and managing cloud servers so you can focus on things you do best: building awesome PHP applications and websites.
</p>
<p class="text-grey-darker text-sm leading-normal mb-4">
We don't discriminate: Laravel, Symfony, Wordpress, Statamic, Craft, and any other PHP application can easily be installed on a Forge server.
</p>
<ul class="list-reset sm:flex flex-wrap text-grey-darker text-sm">
<li class="flex sm:w-1/2 pr-8 mb-4">
<svg class="flex-no-shrink block fill-current text-purple w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"></path>
</svg>
<span>Numerous Cloud Providers</span>
</li>
<li class="flex sm:w-1/2 pr-8 mb-4">
<svg class="flex-no-shrink block fill-current text-purple w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"></path>
</svg>
<span>- Christian Bale -</span>
</li>
<li class="flex sm:w-1/2 pr-8 mb-4">
<svg class="flex-no-shrink block fill-current text-purple w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"></path>
</svg>
<span>If only for today I was unafraid</span>
</li>
<li class="flex sm:w-1/2 pr-8 mb-4">
<svg class="flex-no-shrink block fill-current text-purple w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"></path>
</svg>
<span>

Actors only sound intelligent when there's a good script writer around.

</span>
</li>
<li class="flex sm:w-1/2 pr-8 mb-4">
<svg class="flex-no-shrink block fill-current text-purple w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"></path>
</svg>
<span>Snowy Linen Land</span>
</li>
<li class="flex sm:w-1/2 pr-8 mb-4">
<svg class="flex-no-shrink block fill-current text-purple w-4 h-4 mr-2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm4.393 7.5l-5.643 5.784-2.644-2.506-1.856 1.858 4.5 4.364 7.5-7.643-1.857-1.857z"></path>
</svg>
<span>Server Configuration</span>
</li>
</ul>
</div>
</section>
</div>
[/CODE]
[CODE lang="css" title="CSS"]html{background-color:}
.relative:hover { /* show menu */ }.

nav :hover > ,
nav :focus-within >,
nav :hover {
visibility: visible;
opacity: 1;
display: block;
}

/* Hide sub menu until parent menu item is hoverd */
.menu_item:not🙂hover) + .menu_item__sub_menu {
display: none;
}

::selection{background-color:aliceblue}[/CODE]


CodePen link is here:

https://codepen.io/diomed/pen/gJrQgR

 

[Malcolm]

Hello Coders! I have found the solution to this problem by editing the CSS. But first a little explaining. I didn't notice this until after I fixed it but if you look at the original CSS you're stating that when .menu.item:not(:hover) is not being hovered over then you display: none. However, you also have in addition to that is + .menu_item__sub_menu to display none as well and would have caused the sub_menu to close. So you wouldn't be able to click any menu items.

[CODE lang="css" title="CSS: Original"].menu_item:not🙂hover) + .menu_item__sub_menu {
display: none;
}[/CODE]

Well first, so I figured that perhaps I could delay the effect of display none after you stop hovering the menu-item so you would have enough time to hover back onto the sub-menu. I did this by adding transition: opacity 2s ease-out; opacity: 0; and height: 0;. But that still doesn't fix the problem of the sub-menu from not disappearing, all we did was slowed down the process.

How I got around this was changing .menu_item__sub_menu to .menu_item__sub_menu:not(:hover) so when we're not hovering either the menu will slowly ease out. But, when you are hovering it will remain visible.

You can view the new CSS code below:
[CODE lang="css" title="CSS: NEW"].menu_item:not🙂hover) + .menu_item__sub_menu:not🙂hover) {
transition: opacity 2s ease-out;
opacity: 0;
height: 0;
}[/CODE]

I apologize if I confused anyone, I'm not too great at explaining as it took me a good 10mins to understand what happened lol. If I made any mistakes and or have any questions please don't hesitate to ask me! Help me, help you!

I used the following for some help: https://stackoverflow.com/questions/3331353/transitions-on-the-display-property