0

アンカー要素全体にホバー効果を作成しようとしていますが、マウスがテキストから外れるとすぐにドロップダウンメニューが消えて機能しません。

これがテストサイトです。

Css：

.menu{}
.menu li{float:left;margin-right:24px;list-style-type:none;height:46px;}
.menu li a{width:100%;text-transform: uppercase;color:#39444A;text-decoration:none;font-weight: bold;font-size:18px;display:block;height:46px;}
.menu li a:hover{border-bottom-style: solid;border-bottom-width: 2px;border-bottom-color: #E87D05;color:#E87D05;height:46px;display:block;}
ul.sub_navigation , .sub_navigation
{
    position: absolute;
    display: none;
    z-index: 100;
    background-image: url('/images/menu-bg-png.png');
    background-repeat:repeat-y;
    padding:10px 0px 10px 28px;

 }

どこが間違っているのですか？

4

4 に答える 4

3

CSS（追加）：

.menu li a {
    position: relative;
    z-index: 5;
}
于 2013-01-08T12:05:22.987 に答える
1

あなたの場合は、div#slider-containerがdivとオーバーラップしているため#headerです。#slider-container絶対だと思います。

  1. この場合、プロパティに20〜30ピクセルを追加してTOP、パディングトップを削除できます。

  2. もう1つ行うことは、 divposition:relativeにz-index:10（たとえば）を追加することです。#header

于 2013-01-08T12:14:15.463 に答える
0

アンカー要素のサイズはテキストのサイズであり、それ以外はありません。リンクとリンクの間のスペースは、liの右マージンです。

削除する

li {margin_right: 40px}

とセット

a {padding_right: 40px}
于 2013-01-08T12:05:02.187 に答える
0

これを試して：

.menu > li:hover .sub_navigation {
    display: block;
}
于 2013-01-08T12:06:19.120 に答える