Cách làm cho toàn bộ div có thể nhấp được

Question

Tôi đang tạo một menu và có một vấn đề đơn giản và ngu ngốc. Vấn đề là: Tôi có các phần tử <span> bên trong 'Menu' div. Với id '#menu'. Tôi đã tạo một tính năng mà bạn không thể vô tình nhấp vào <a> bên trong <span> thông qua CSS visibility. Nhưng bây giờ nếu bạn nhấp vào menu trong không gian giữa các sọc trắng, nó sẽ không hoạt động như một nút.

Câu hỏi đặt ra là: 'Cách thực hiện điều này <div> có thể nhấp đầy đủ?'

Here's the Fiddle.

Cảm ơn trước.

Answer 1

Có thể chỉ đơn giản là làm với width tài sản, chỉ cần thêm một chiều rộng để div menu:

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

Answer 2

Thay vì giữ chiều rộng cố định, chúng ta cũng có thể sử dụng độ rộng đến 100% mang đến cho bạn nhiều hơn khu vực có thể nhấp để thu gọn menu

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