Невозможно сделать весь элемент 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; 
} 

Вашего z-index: 500 на a не признаются, потому что вы не дали позиционирование a элемента любого рода, и z-index только для позиционированных элементов.

Answer 2

Вы можете либо поместить onclick событие на li тег или использовать CSS, чтобы сделать a теги заполнить li. Последнее решение можно установить, установив display:block; на тег a, а затем установить высоту и другой стиль соответствующим образом для тега li.

Кроме того, для списков используются теги li. Хотя в вашем полном решении они могут быть использованы правильно, в вашем примере может быть достаточно тегов a.