CSS Drop Down Menu Hover Effect

How can I make my dropdown menus stay visible on hover?

Your dropdown disappears because as you move your cursor from the class link to the next sibling with class dropdown-menu, it un-hovers the link, causing the dropdown to disappear. To fix this, you can add padding to link, and if you would like it to take up the same amount of space you can add a negative margin of equal value to the padding (e.g. add .link { padding: 10px; margin: -10px; }).

Moreover, your selector .dropdown > .link:hover + .dropdown-menu only affects the class dropdown-menu when class link is hovered. You want this same effect to persist as class dropdown-menu is hovered, so add .dropdown-menu:hover as well.

.dropdown > .link:hover + .dropdown-menu,
.dropdown-menu:hover {
opacity: 1;
transform: translateY(0px);
pointer-events: auto;
}

Keep drop down menu open after hover (CSS)

On the 'a' tag, add a height or padding-bottom to it on hover. Your 'a' tag might need to be positioned absolute so that its height won't affect the height of your header.

Something like the below

.about-dropdown a:hover {
padding-bottom: 30px; /*height dependent on the gap you want to fill*/
position: absolute;
}

CSS drop down menu hover effect

Try this:

ul#sub1 {
position:absolute;
left:0;
width:125px;
visibility: hidden;
}
ul#menu li:hover #sub1 {
visibility:visible;
}

Fiddle

issue is that your your menu ul is visible (always) but the li's inside them are invisible (always) due to the selector of the this rule ul#sub1 li.

Do remember that visibility:hidden hides the element but still occupies space in DOM, whereas display:none hides the element and takes it out of page element flow

Also you necessarily do not need to use ids in css selectors especially for a menu like this. You can achieve it without that, consider the situation with many level menus, by using ids you will have to write selectors indefinitely. Instead you can try something like this.

ul#menu ul {
padding:0px;
}
ul#menu li {
position:relative;
list-style-type:none;
float: left;
width: 125px;
}
ul#menu li > ul {
display: none;
}
ul#menu li:hover > ul {
display:block;
}

Fiddle

CSS Drop-down menu enlarges the parent width, when on hover action

Here is a JSFiddle of the solution I mention below: https://jsfiddle.net/2sy0dn6w/

Fixing your solution is incredibly simple. You want to use position: absolute; for your div.dropdowncontent CSS class. You also want to make your parent li tag have position: relative; to keep your div.dropdowncontent constrained within the parent li. And then you have an issue with your primary ul tag with using overflow: hidden. This would prevent your dropdown from being seen. And I understand why you are using overflow: hidden; - you're using it as a clearfix. But in this case, it is a problem because it hides your dropdown. So instead we would want to use :before with the ul for the clearfix. The steps for applying the fixes are below.

First, remove overflow: hidden; from your css for div.menu ul {}. This will create the following:

div.menu ul {
border-radius: 05px;
position: relative;
list-style-type: none;
margin: 0px;
padding: 0px;
/* overflow: hidden; */
background-color: #a9bcba;
/*z-index: -1; */
}

Next, right after the div.menu ul {} CSS, add:

div.menu > ul::after {
clear: both;
display: table;
content: ' ';
overflow: hidden;
}

Lastly, at the very bottom of your CSS, add the following (you can even move each of the below to their designated declarations you already have in your CSS. The reason I'm adding this separate is so that it's more obvious what I included to give you the outcome you're looking for):

div.menu > ul > li {
position: relative;
}

.dropdowncontent {
position: absolute;
top: 100%;
}

li.dropdown:hover div.dropdowncontent {
display: block;
}

Show dropdown-menu on hover and close on click using only CSS

Quick Check : Working JSFiddle

Can someone help me with an explanation as to why the links from a dropdown menu are not working when I click on them? Maybe because of pointer events?

Explanation on why this behavior:
Yes you are right, It is because of the way you are using the :active selector logic, To explain in detail, consider your this CSS rule

.container:hover .test1:active {
display: none;
}

You have your menu links under your main li.test1 and any click on the inner links are also bubbled up to this element, so its as good as clicking the li. So as soon as the mouse is held down (mouse down event) it triggers the :active event and you are hiding the links (ie: li.test1), But a click event is complete only when mouse is both down and up. So by now the li is hidden and the mouse up is no longer on the link. So as you see there is no chance of the click event to be triggered. This is the issue.


I saw other answers which you seem to be interested in and this really doesn't need any kind of hack, It can be done by just formatting your HTML and with some CSS changes.


Solution: Rather than wrapping up your inner menu links inside the li.test1 you can work with two different li , One for the X CLose and other for holding the menu links. With this in place we can make sure when ever the li.test1 is active (ie mouse is down) we can hide it and also the other new li which is adjacent to it. So this means when ever the user clicks on the X Close li we hide the menu, If he clicks on the other menu items you are redirected.

So the changes in your HTML structure should be like

<ul class="container">
Drop down menu
<li class="test1">
<a class="dropdown" href="#">X Close</a>
</li>
<li class="MenuLinks">
<ul class="content">
<!-- all your links go here-->
</ul>
</li>
</ul>

And Main CSS rule is

.container:hover .test1:active,
.container:hover .test1:active + .MenuLinks {
display: none;
}

Below is a SO working Snippet

body {  padding: 20px;}.container {  border: 1px solid lime;  padding: 10px;  width: 200px;  list-style-type: none;}.test1,.MenuLinks {    display: none;  border-color: orange;  border-style: dashed;  background: green;  pointer-events: none;}.test1 {  padding: 10px;  border-width: 1px 1px 0px 1px;}.MenuLinks {  border-width: 0px 1px 1px 1px;}.container:hover li {  display: block;}
/*Rule to hide both test1 and MenuLinks when X Close is clicked*/.container:hover .test1:active,.container:hover .test1:active + .MenuLinks { display: none;}

a { pointer-events: auto; color: lime; font-weight: bold;}
<ul class="container">  Drop down menu  <li class="test1">    <a class="dropdown" href="#">X Close</a>  </li>  <!--seperate li for close-->
<li class="MenuLinks"> <!--wrap all your menu items here--> <ul class="content"> CLOSE THIS CONTENT <li class="link"><a href="http://www.google.com">Go to link 1</a> </li> <li class="link"><a href="https://www.google.co.uk">Go to link 2</a> </li> <li class="link"><a href="https://www.google.co.uk">Go to link 3</a> </li> </ul> <li></ul>

Hover is not displaying a dropdown menu

In order to show an object on hover with css, that object must be the sibling or child of the thing being hovered (As there are no parent selectors). This is not the case in your code.

So you have a few options:

  • Make div.dropcmpy a child of li.shrt. (As in Teuta Koraqi's answer)
  • Hack. Use an empty pseudo element (.dropcmpy::before) and absolutely position it over li.shrt, then use that as the hover element.

  • Use javascript

I don't know what the structure of your page is so can't say which of these would be best for you. The first is certainly the cleanest if you can manage it.

Dropdown items on same line + hover effect goes to far to the right

  1. you have .nav-item-holder a {display: inline}, where actually you want this to by display: block;
  2. I would also add .nav-item-holder .dropdown-content a { padding-left: 0; padding-right: 0; } to make sure you don't have any jumps of the items when you hover them.

Here is a working version of your code, fix (with my 2 suggestion)

.nav-wrapper { position: fixed; color:#151618; background-color:#151618; width:100%; border-bottom:4px solid #0bb1ff; height:50px; z-index:1; margin-top:0 auto;}
.nav-logo { width:45px; position:absolute; z-index:2; top:5%;}
.nav-item { float:left;}
.dropbtn { background-color: #151618; display: inline-block; height:100%; padding-left:10px; padding-right:10px; color:#0bb1ff; text-decoration: none; border: none; cursor: pointer;}
.dropbtn:hover { color:#fff; height:100%; background-color:#0bb1ff;}
/* The container <div> - needed to position the dropdown content */.dropdown { position: relative; display: inline-block; background-color: #151618;}
/* Dropdown Content (Hidden by Default) */.dropdown-content { display: none; position: absolute; background-color: #151618; border:3px solid #0bb1ff; text-align: center; width:180px;}
/* Links inside the dropdown */.dropdown-content a { color: #0bb1ff; text-decoration: none; display: block; padding: 0;}
/* Change color of dropdown links on hover */.dropdown-content a:hover {background-color: #0bb1ff; color:#fff; width:100%;}
/* Show the dropdown menu on hover */.dropdown:hover .dropdown-content { display: inline-block; clear:both;}
/* Change the background color of the dropdown button when the dropdown content is shown */.dropdown:hover .dropbtn { background-color: #0bb1ff;}
.dropdown:hover .dropbtn { color:#fff;}
.nav-item-holder { z-index:3; color:#151618; font:14px verdana; line-height:50px; left:50px; position:absolute;}
.nav-item-holder a { display: block; padding-left:10px; padding-right:10px; color:#0bb1ff; text-decoration: none;}
.nav-item-holder a:hover { position:relative; color:#fff; text-decoration: none; background-color:#0bb1ff; height:100%;}.nav-item-holder .dropdown-content a { padding-left: 0; padding-right: 0;}.active { position:relative; color:#fff; text-decoration: none; background-color:#0bb1ff; height:100%;}
.user-image { width: 30px; height: 30px; position:absolute; background-size: cover; background-repeat: no-repeat; background-position: center center; -webkit-border-radius: 99em; -moz-border-radius: 99em; border-radius: 99em; border: 2px solid #0bb1ff; top:8px; right:30px;}
.nav-user { line-height: 50px; color:#fff; position:absolute; right:0;}
.nav-user span { display:inline-block; position: absolute; right:70px;}
.nav-user-drop { position:absolute; display:none;
}
.nav-user:hover .nav-user-drop { display:block;}
.user-drop { padding:5px; text-align: center; background-color:#151618; color:#0bb1ff;}
<div class="nav-wrapper">  <div class="nav-content">    <a class="nav-logo" href="/"><img src="/assets/images/templates/volcan.png" class="nav-logo"/></a>
<div class="nav-item-holder"> <div class="nav-item"><a href="" >Forum</a></div> <div class="nav-item"><a href="" >Article</a></div> <div class="dropdown"> <div class="dropbtn">Discover</div> <div class="dropdown-content"> <a href="#">Top</a> <a href="#">Recent</a> <a href="#">Verified</a> </div> </div> </div>

<form> <!--Gone add search bar--> </form>

</div> <div class="nav-user-drop"> <a href="" class="user-drop">Profile</a> <a href="" class="user-drop">Inbox</a> <a href="" class="user-drop">Settings</a> <a href="" class="user-drop">Sign Out</a> </div>
</div></div>

How to change navigation drop down from hover to click

Add these lines at the bottom of your css file or tag.

.hidden{
display: none;
}
.shown{
display: block;
opacity: 1;
}

The html file:

<li>
<a id="prod1" href="#">Product 1</a>
<ul id="prod1list" class="hidden">
<li><a href="#">rx.com </a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Copay Cards</a></li>
</ul>
</li>
<script>
document.getElementById('prod1').addEventListener('click', function(e){
e.preventDefault();
document.getElementById('prod1list').classList.toggle('shown');
});
</script>

I tried it and it seems to work fine.



Related Topics



Leave a reply



Submit