0

正しい言葉でこれを正しく尋ねていることを願っています: 私は非常に基本的な 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;}

どんな助けでも素晴らしいでしょう。ありがとう！

J

4

2 に答える 2

1

次の CSS 行を試してください。

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

<li>または、<a>( ) でラップすることもできますが<a><li></li></a>、それは悪い習慣です。

于 2012-09-25T17:56:39.390 に答える
0

ここで尋ねられた同じ質問がいくつかの良い答えで見つかりました。簡単な答えは、使用display:block;してからそれにパディングを追加することですが、他のスレッドの答えですべてが説明されるはずです。

于 2012-09-25T18:13:34.060 に答える