Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

HTML & CSS Drop-down menu item hover not working

Malcolm

Administrator
Administrator
Staff Team
Code Plus
Company Plus
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:px-0 sm:py-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:px-0 sm:py-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:
 
Last edited:
Solution
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...
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
 
Solution

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom