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 ofli.shrt
. (As in Teuta Koraqi's answer) Hack. Use an empty pseudo element (
.dropcmpy::before
) and absolutely position it overli.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
- you have
.nav-item-holder a {display: inline}
, where actually you want this to bydisplay: block
; - 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
Where Is Data Stored When Using an HTML 5 Web SQL Database
HTML Input Range Step as an Array of Values
How to Auto Resize HTML Table Cell to Fit The Text Size
How to Style a Horizontal List with Bullets Between Items Using CSS
Preventing Fixed Footer from Overlapping Content
What Is The Order of Loading The CSS Files in a HTML Page
<Ol> with Numbers Another Color
How to Center Two Divs Floating Next to One Another
How to Calc() The Number of Rows in a Grid Template
How to Conditionally Display Element Attributes Using Angular2
Draw Single Pixel Line in HTML5 Canvas
Why Td Width Is Not Working or Not Followed
How to Apply Mix-Blend-Mode While Keeping Text Opaque
Setting The Height of a Table in HTML Has No Effect
Equal Height Flexbox Columns in Chrome