I'm making a menu and have one simple and stupid issue. The problem is: I have my <span>
elements inside a 'Menu' div
. With id '#menu'
. I've made a feature by which you can't accidentally click on the <a>
inside the <span>
through CSS visibility
. But now if you click the menu in space between white stripes, it won't act like a button.
So the question is: 'How to make this <div>
fully clickable?'
Here's the Fiddle.
Thanks in advance.
It can be simply do with width
property, just need to add a width to the menu div:
#menu {
-moz-user-select: none;
height: 40px;
margin: 50px;
position: absolute;
width: 40px; /* newly added */
}
Instead of keeping fixed width, we can also use the width to 100% which gives you more clickable area to collapse the menu
#menu {
position: absolute;
height: 40px;
width : 100%; /*newly added*/
margin: 50px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none
}
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