CSSでプルダウンメニュー

質問

お世話になります。
添付画像のようなプルダウンメニューを作りたいです。

http://css-eblog.com/csstechnique/css-8.html
こちらを参考にさせていただき、ソースを変更しました。一応動作はするのですが、不具合があり悩んでいます。

問題はマウスオーバーさせたい画像の高さ（60px）とプルダウンで出てくるもの（画像は使用せずCSSで背景色をしたバー状になっています）の高さ（20px）が異なることです。

添付画像のように、画像A全体がマウスオーバー領域となり、20pxのバーが出るようにしたいのですが、現在はBのようにバーが60pxとなっています。
※IE6のみ。他ブラウザではバーの高さ自体は20pxであるものの、リンク先1の領域が60pxとなっているため、リンク先2の文字が書かれている20px付近をクリックしてもリンク先1に行ってしまいます。

そこでソースの値を
.menu ul li a {
display: block;
height: 20px;←ココ
padding:3px;
}
と変更したら、バーは20pxで出るようになり、リンク先2もうまく選べるものの、今度は60pxの画像の上20px部分のみしかマウスオーバーに反応しなくなってしまいました。
知識がなくどうしていいのかサッパリ分かりません。
どうか助けて下さい！

下記ソースです。
/* CSS*/
.menu {
margin:0px auto;
padding:0px;
width:760px;
height:60px;
}
.menu ul li {
float: left;
position: relative;
margin-right: 0px;
width: 128px;
height: 20px;
list-style:none;
}
.menu ul li table {
border-collapse: collapse;
border: none;
font-size: 10px;
padding: 0;
position: absolute;
top: 0;
left: 0;
}

.menu ul li ul {
visibility: hidden;
overflow: hidden;
position: absolute;
top:60px;
left: 0px;
width: 128px;
height:20px;
z-index: 100;
}
.menu ul li ul li {
margin-bottom: 0;
width: 128px;
height: 20px;
}

.menu ul li a {
display: block;
height: 60px;
padding:3px;
}

.menu ul li a:hover {
position: relative;
z-index: 100;
}

.menu ul li:hover ul ,
.menu ul li a:hover ul {
visibility: visible;
overflow: visible;
height: auto;
z-index: 10;
}
.menu li.test {background:url(../image/test.jpg) left top no-repeat; width:128px; height:60px;}
.menu li.sub
{ background-color:#666666; color:#FFFFFF; text-align:left; width:122px; height:20px; padding:3px;}

a.sub:link{font-size:10px; color:#FFFFFF; text-decoration:none;}/*サブメニューリンク*/
a.sub:visited{font-size:10px; color:#FFFFFF; text-decoration:none;}
a.sub:hover{ font-size:10px; color:#FFFFFF; text-decoration:underline;}
a.sub:active{ font-size:10px; color:#FFFFFF; text-decoration:underline;}

<!--html-->
<div class="menu">
<ul>
<li class="test"><a href="test.html"><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li class="sub"><a href="test.html" class="sub">リンク先1</a></li>
<li class="sub"><a href="test2.html" class="sub">リンク先2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>

長文申し訳ありません。よろしくお願い致します。

回答No.1

yotsuba222 · ベストアンサー

ここ

.menu ul li a {
display: block;
height: 60px;
padding:3px;
}

を次のようにしてみてください。

.menu ul li a {
display: block;
padding:3px;
}

.menu ul li.test a {
height: 60px;
}

.menu ul li.sub a {
height: 20px;
}

簡単に解説すると
.menu ul li a の箇所の高さが（classがtestだろうがsubだろうが）60pxになるのを防ぐために
.menu ul li.test a の場合（classがtest）は60px
.menu ul li.sub a の場合（classがsub）は20pxにしただけです。

お礼

yotsuba222さま

すごいです！できました！ありがとうございます～！
感激しています。長文でしたしうまく伝わるのか不安で、もしかしたらご回答いただけないかもと思っていたのですが…。
ずっと悩んでいたので救われました。

本当にありがとうございました。
解説も分かりやすく、CSSの仕組みが理解できました。
どうもありがとうございます。