-1

リンクにカーソルを合わせた後、サブメニューをアクティブに保つにはどうすればよいですか？つまり、マウスを他の場所に移動してもアクティブなままになるので、常にそこに戻ってホバーするのは面倒ではありません。

ナビゲーションメニューの例を次に示します。--削除されたため、修正されました--

それを達成するにはjQueryを使用する必要があると確信していますか？ただし、jQueryの経験はあまりありません。それとも、純粋なcssとhtmlでも実際に実行できますか？

これが私のナビゲーションCSSコードです：

nav {
    width: 1000px;
    height: 45px;
    margin-bottom: 45px;
    float: left;
    border-radius: 2px;
    line-height: normal;
    -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 0 4px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
    position: relative; }

    nav ul li {
        height: 19px;
        padding: 13px 10px;
        color: #0f41a4;
        float: left;
        text-decoration: none; }

        nav ul li:hover ul { display: block; }


        nav ul li ul:hover { display: block; }

        nav ul li ul {
            width: 999px;
            display: none;
            position: absolute;
            margin-top: 13px;
            background: #F6F6F6;
            background: rgba(250, 250, 250, .5);
            border-bottom-left-radius: 5px;
            border-bottom-right-radius: 5px;
            border: 1px solid #FAFAFA;
            border-bottom: 1px solid #ccc;
            z-index: 9999;
            left: 0px;
            float: left; }

            nav ul li ul li {
                padding: 8px 10px;
                float: left; }

        nav ul li:hover {
            text-decoration: underline;
            background: rgba(0, 0, 0, .03); }
4

1 に答える 1

1

サブメニューを常にアクティブにしたい場合は、サブメニューを何も表示せず、ホバー時に表示するように設定します。ここにjavascript/jqueryが必要です。

$(".page-item").click(function() {
   $(this).children().find(".children").show();
});
于 2013-01-26T17:21:49.880 に答える