Как сделать весь div clickable

Я делаю меню и имею одну простую и глупую проблему. Проблема в том, что у меня есть элементы <span> внутри "Меню" div. С id '#menu'. Я создал функцию, с помощью которой вы не можете случайно нажать на <a> внутри <span> через CSS visibility. Но теперь, если вы нажмете меню в пространстве между белыми полосами, оно не будет действовать как кнопка.

Итак, вопрос: "Как сделать этот <div> полностью интерактивным?"

Здесь Fiddle.

Спасибо заранее.

Ответы

Ответ 1

Это может быть просто с помощью свойства width, просто нужно добавить ширину в div меню:

#menu {
    -moz-user-select: none;
    height: 40px;
    margin: 50px;
    position: absolute;
    width: 40px; /* newly added */
}

Ответ 2

Вместо сохранения фиксированной ширины мы также можем использовать ширину до 100%, что дает вам более привлекательную область, чтобы свернуть меню

#menu {
  position: absolute;
  height: 40px;
  width : 100%; /*newly added*/
  margin: 50px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none
}