CSS 下拉菜单：如何单击整个 li:hover，而不仅仅是其中的超链接？答案

【问题标题】：CSS dropdown menu: how do I click on the whole li:hover, not just the hyperlink in it?CSS 下拉菜单：如何单击整个 li:hover，而不仅仅是其中的超链接？
【发布时间】：2012-09-25 17:49:52
【问题描述】：

我希望我用正确的词正确地问了这个问题：我有一个非常基本的 CSS 下拉菜单，当我将鼠标悬停在它们上方时，它会突出显示（背景颜色）每个 li。当我悬停时，我希望能够单击整个 li 区域以到达链接目标，而不必找到该 li 中的超链接来执行单击。

对于本次讨论，这里是我的菜单的简化：

<div class="catnav">
<ul>
  <li><a href="#">CATEGORY</a>
    <ul>
      <li>Florists</li>
      <li>Caterers</li>
      <li>Formal Wear</li>
      <li>All Categories...</li>
    </ul>
  </li>
</ul>
</div>

...和 CSS：

.catnav ul {list-style:none;margin:0px;padding:0px;}
.catnav li {float:left;text-align:center;position:relative;background:#f5f6f7;padding:0px 10px 0px 10px;}
.catnav li ul li {float:none;width:150px;text-align:left;padding-left:0px 0px 0px 5px;line-height:17px;}
.catnav a {text-decoration:none;color:#548dd4;font-family:arial;}

.catnav li ul {position:absolute;top:21px;left:0px; border:1px solid #ccc;
    -moz-box-shadow: 0px 3px 10px #aaa;
    -webkit-box-shadow: 0px 3px 10px #aaa;
    box-shadow: 0px 3px 10px #aaa;
    visibility:hidden;}
.catnav li:hover ul {visibility:visible;z-index:100;}
.catnav li:hover {background:#e0e0e0;}
.catnav li:hover li a {font-size:0.8em;font-weight:normal;visibility:visible;z-index:100;}

任何帮助都会很棒。谢谢！

【问题讨论】：

标签： css drop-down-menu click hover

【解决方案1】：

试试这行css：

.catnav li ul li a {display:block;width:150px;}

或者你可以用<a> (<a><li></li></a>) 包裹你的<li>，但这是不好的做法..

【讨论】：

谢谢，这行得通。我还从 li ul li 中取出了左边的 pad 并将其添加到了锚点上。完美运行。 J

【解决方案2】：

Found the same question 在这里提出了一些很好的答案。快速回答是使用display:block;，然后在其中添加您的填充，但另一个线程中的答案应该为您解释一切。

【讨论】：