css - 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;到您的锚标记 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>

Answer 2

试试这个 <---> 而不是使用padding:10px 40px来确定高度使用这个：

line-height:30px <---- it replaces the padding top and bottom (20px) and add 10px of the font.

那么你的 CSS 可能是：

#topMenu ul li {
 font: bold 12px sans-serif;
 text-transform:uppercase;
 color:#666;
 display: inline-block;
 margin-right: -4px;
 position: relative;
 padding: 0px 40px;
 line-height:30px;
 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;
}

如果你在a里面有标签，li那么让它阻塞和相同的行高：

#topmenu ul li a {
  display:block;
  line-height:30px;
  height:30px;
}