How to make the whole div clickable

Question

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.

Answer 1

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 */
}

Answer 2

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
}