无法使整个锂项目可点击

我看到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 -->

来源

2013-06-22 AppleTattooGuy

这是因为链接仅在文本周围。如果你想像你一样对链接进行风格化，最好只使用链接而不是使用列表。（或者至少我是这么做的） – jdepypere

你唯一缺少的是a元件上的定位性能。 See fiddle.：

.menu li a { 
    position: relative; 
}

您在az-index: 500没有被确认，因为你没有给任何形式的a元素定位，z-index仅用于定位的元素。

来源

2013-06-22 15:11:49 ScottS

谢谢你清晰，简单的答案，完美的作品 - 再次感谢:-) – AppleTattooGuy

您既可以放置在li标签的onclick事件或使用CSS使a标签填补li。将后一种溶液是通过在a标签设置display:block;，然后设置高度等适当造型为li标签成为可能。

此外，li标签是为了用于列表。尽管在您的完整解决方案中，它们可能会被正确使用，但在您的示例中，只需使用a标签即可。

来源

2013-06-22 15:09:44 tvkanters

第二种解决方案;为问题的上下文菜单。真棒。 – redditor

无法使整个锂项目可点击

回答

相关问题