Geek Answers Handbook

How to make my menu appear when I click css

When I hover over a menu, it shows a drop-down menu. I want this to happen when clicked. I tried, but it did not help 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 .

+6
source share
2 answers

HerrSerkers answer is a good answer, but there is another if you want to change your markup a bit. You can simulate click using the checkbox with its label , for example:

 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

Refresh - as HerrSerker noted, there is a drawback in closing the menu - check your fiddle with a fix.

+5
source

Instead of the :hover pseudo-class, you should use the :focus pseudo-class.

 .responsive-menu ul li:focus ul { display:block; }

To set li focus, you need the tabindex attribute

 <li tabindex="9999">Menu

http://jsfiddle.net/t78mf7jb/1/

<amend / h 3>

To ensure that the focus effect from the browser does not add outline:none style to li

 .responsive-menu ul li:focus { outline: none; }

http://jsfiddle.net/t78mf7jb/3/

+11
source

More articles:


All Articles