如何使整个div可点击

Question

我正在制作菜单并有一个简单而愚蠢的问题。 问题是：我在' div有<span>元素。 使用id '#menu' 。 我已经创建了一个功能，您不会通过CSS visibility意外地点击<span>的<a> 。 但现在如果你点击白色条纹之间的空间菜单，它将不会像一个按钮。

所以问题是： '如何让这个<div>完全可点击？'

这是小提琴。

提前致谢。

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
}