When I hover over the Menu it shows the dropdown menu. I want it to happen on click. I tried it but it didnt work for me.
This is my code:
HTML:
<div class="responsive-menu">
<ul>
<li>Menu
<ul>
<li>Zomer</li>
<li>Herfst</li>
<li>Winter</li>
<li>Lente</li>
</ul>
</li>
</ul>
</div>
CSS:
li {
list-style-type:none;
}
.responsive-menu {
display:block;
background-color:black;
color:white;
text-align:center;
padding:10px;
font-size:200%;
}
.responsive-menu ul li ul li {
padding:10px;
border-bottom:solid 1px white;
border-top:solid 1px white;
}
.responsive-menu ul li ul {
display:none;
font-size:60%;
padding-top:30px;
}
.responsive-menu ul li:hover ul {
display:block;
}
Here is a link to JSFiddle.
Example Explained Use any element to open the dropdown menu, e.g. a <button>, <a> or <p> element. Use a container element (like <div>) to create the dropdown menu and add the dropdown links inside it. Wrap a <div> element around the button and the <div> to position the dropdown menu correctly with CSS.
The most common way of creating a click event with CSS is using the checkbox hack. This method has broad browser support. You need to add a for attribute to the <label> element and an id attribute to the <input> element.
Step 1: Create and style a div with a class name “dropdown.” First, create a div and add the class dropdown to it. In CSS, set this div's display to inline-block and position to relative. This will allow the dropdown content to appear right below the dropdown button.
Instead of the :hover
pseudo-class you should use the :focus
pseudo-class.
.responsive-menu ul li:focus ul {
display:block;
}
To let the li gain focus it needs a tabindex
attribute
<li tabindex="9999">Menu
http://jsfiddle.net/t78mf7jb/1/
For not having the focus effect from browser add a outline:none
style on the li
.responsive-menu ul li:focus {
outline: none;
}
http://jsfiddle.net/t78mf7jb/3/
HerrSerkers answer is a good answer, but there is another if you're willing to change your markup a little. You can simulate a click
by using checkbox
with it's label
, like:
li {
list-style-type: none;
}
.responsive-menu {
display: block;
background-color: black;
color: white;
text-align: center;
padding: 10px;
font-size: 200%;
}
.responsive-menu ul li ul li {
padding: 10px;
border-bottom: solid 1px white;
border-top: solid 1px white;
}
.responsive-menu ul li ul {
display: none;
font-size: 60%;
padding-top: 30px;
}
#trigger {
display: none;
}
#trigger:checked + .responsive-menu ul li:hover ul {
display: block;
}
<input type="checkbox" id="trigger" />
<div class="responsive-menu">
<ul>
<li>
<label for="trigger">Menu</label>
<ul>
<li>Zomer</li>
<li>Herfst</li>
<li>Winter</li>
<li>Lente</li>
</ul>
</li>
</ul>
</div>
JSFiddle
Update - as HerrSerker pointed out, there is a flaw regarding closing the menu - check his fiddle with a fix.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With