0

現在、次のページのいくつかのドロップダウン メニューに取り組んでいます: http://icao.tungsten.hireserve-test.com/home.html

当初、これらのメニューは 1 つしかありませんでしたが、クライアントがテンプレートを変更したため、2 つのドロップダウン メニューを実装する必要があります。以前は、これは show() と hide() を起動する jQuery hover() イベントで行われていましたが、今回はこれを CSS に置き換えました。

li.dynamic-children{
    position: relative
}

li.dynamic-children ul{
    display: none;
    position: absolute;
}

li.dynamic-children:hover ul{
    display: block;
    left: -1px;
    top: 18px;
    position: absolute;
    z-index: 100
}

li.dynamic-children:hover ul span{
    width: 100%
}

ドロップダウン メニューはホバー時に正常に表示されますが、CSS で行われるため、ユーザーがドロップダウンをトリガーするリンクから離れたときにドロップダウンが持続することを保証する方法はないようです。これは、ユーザーがドロップダウン メニューのアイテムを選択できず、役に立たないことを意味します。

ユーザーがドロップダウン メニューを選択できるように、メニューを強制的に長く維持する方法について、何かアイデアはありますか?

編集：

以下に示すコードの一部に基づいて、次の CSS ルールを含めました。

.s4-tn .horizontal ul.dynamic {
    background-color: #ECF4FC;
    border-top:4px solid #003D78;
    margin: 0;
    width: 255px;
    z-index: 1000 !important;
}


.menu-horizontal li.static, .menu-horizontal a.static, .menu-horizontal span.static {
    float: left;
    padding-bottom: 5px;
}

これらのルールにより、メニューは永続化されますが、IE7 ではドロップダウン メニューがページ上の他の要素に遅れをとってしまい、このブラウザーではまだ役に立たなくなります。多数の z-index 修正を試みましたが、役に立ちませんでした。

4

2 に答える 2

0

これを試して、

.s4-tn .horizontal ul.dynamic {
    background-color: #ECF4FC;
    border: 0 solid #003D78;
    margin: 0;
    width: 255px;
    z-index: 101;
}



 li.dynamic-children:hover ul {
    display: block;
    left: -1px;
    position: absolute;
    top: 22px;
}
于 2013-11-08T12:21:44.437 に答える