0

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 -->  
4

2 に答える 2

5

欠けているのは、a要素の配置プロパティだけです。フィドルを参照してください。:

.menu li a {
   position: relative;
}

要素にいかなる種類の配置も与えておらず、配置された要素のみを対象としているため、あなたのz-index: 500オンはa認識されていません。az-index

于 2013-06-22T15:11:49.370 に答える
0

onclickタグにイベントを配置するか、liCSS を使用してaタグでli. 後者の解決策はdisplay:block;aタグを設定してから、タグの高さとその他のスタイルを適切に設定することで可能になりliます。

また、liタグはリストに使用するためのものです。完全なソリューションでは適切に使用される可能性がありますが、例ではaタグだけで十分です。

于 2013-06-22T15:09:44.843 に答える