css 下拉菜单只能悬停在文本上

Question

当使用我的 css 下拉菜单时，只有下拉菜单的文本处于事件状态，这使得选择起来更加困难，而不是更容易选择的区域(尤其是对于移动设备)。

CSS 是:

#topMenu ul {
  text-align: center;
  display: inline;
  margin: 0;
  padding: 15px 20px 17px 20px;
  list-style: none;
}
#topMenu ul li {
  font: bold 12px sans-serif;
  text-transform:uppercase;
  color:#666;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 10px 40px;
  background: #EEE;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
}
#topMenu ul li:hover {
  background: #EEE;
  color: #000;
}
#topMenu ul li ul {
z-index: 5000;
  padding: 0;
  position: absolute;
  top: 38px;
  left: 0;
  width: 150px;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#topMenu ul li ul li { 
  background: #EEE; 
  display: block; 
  color: #000;
  border:solid 1px #999999;
}
#topMenu ul li ul li:hover { background: #EEE; }
#topMenu ul li:hover ul {
  display: block;

  opacity: 1;
  visibility: visible;
}

代码可能有点繁琐。

谢谢

Answer 1

您可以将 display:block; 添加到您的 anchor 标记 CSS 中，使其填充 li。

CSS:

#topMenu ul li ul a {
  display: block;
}

HTML:

<ul id="topMenu">
  <li>
    <ul>
      <li>
        <a href="#">Link Text</a>
      </li>
      <!-- more submenu items -->
    </ul>
  </li>
  <!-- more topMenu items -->
</ul>