html - 无法使整个 LI 元素可点击

Question

我在 StackOverflow 上看到了一些关于此的主题，并尝试实现帖子中的提示，但没有成功，所以这篇帖子不打算重复，我试图让我的整个 LI 链接可点击，我有在下面设置一个 JSFiddle 和一些代码。预先感谢您的帮助。

JSFiddle

http://jsfiddle.net/szfdh/

          <div class="menu" id="menubar"> <div class="w_960"><ul>

<li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-53 current_page_item menu-item-55"><a href="#">Home</a></li>
<li id="menu-item-47" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-47"><a href="#">Junior Scheme</a></li>
<li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="#">Teen Scheme</a></li>
<li id="menu-item-45" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-45"><a href="#">About Us</a></li>
<li id="menu-item-44" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-44"><a href="#">Photo Gallery</a></li>
<li id="menu-item-43" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-43"><a href="">Policies</a></li>
<li id="menu-item-48" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-48"><a href="">Contact Us</a></li>
</ul></div><!-- end  menubar w_960 --> </div><!-- end menubar -->  

Answer 1

您唯一缺少的是 a 元素上的定位属性。 See fiddle. :

.menu li a {
   position: relative;
}

a 上的 z-index: 500 未被识别，因为您没有给 a 元素任何类型的定位，而 z-index 仅适用于定位元素。