Как сделать целое div clickable

Question

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

Вопрос в следующем: 'Как сделать это <div> полностью кликабельным?'

Here's the Fiddle.

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

Answer 1

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

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

Answer 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 
}