3

私の問題は以前に何度も解決されたと思いますが、正確に私のケースを見つけることができません。

サブメニューを含む垂直メニューがあり、親がクリックされた (ホバーされていない) 場合にのみサブメニューを表示し、一度に 1 つのサブメニューのみを表示し、メニューのどこかをクリックした後、サブメニューを非表示にします。

これは私が今持っているものです - それは今のホバリングに基づいています. a:hover を a:active のようなものに変更しようとしましたが、うまくいきません (私は CSS があまり得意ではありません)。

    /* コンテナ */
     #cssmenu > ul {
        表示ブロック;
        位置: 相対;
      //幅: 190px;
      幅:100%;
     }

        /* リンクを含むリスト要素 */
           #cssmenu > ULリ{
              表示ブロック;
              位置: 相対;
              マージン: 0;
              パディング: 0;
              幅: 100%;  
           }

            /* 一般的なリンク スタイル */
            #cssmenu > ul li a {
                表示ブロック;
                位置: 相対;
                マージン: 2;
                幅:95%;
                高さ:50px;
                背景色:#ABC578;
                ボーダー左:ソリッド 0px #FFFFFF;
                border-bottom:solid 1px #FFFFFF;
                フォント: 0.7em タホマ、サンセリフ。
                フォントサイズ: 14px;
                font-weight:太字;
                色: #FFFFFF;
                テキスト装飾:なし;
                パディングトップ:30px;
            }


            /* メニュー/サブメニュー リンクのホバー状態 */
            #cssmenu > ul li>a:hover, #cssmenu > ul li:hover>a {
                色: #fff;
                text-shadow: 0 1px 0 rgba(0, 0, 0, .3);
                背景: #82c500;
                background: -webkit-linear-gradient(bottom, #82c500, #000000);
                背景: -ms-linear-gradient(bottom, #82c500, #000000);
                背景: -moz-linear-gradient(bottom, #82c500, #000000);
                background: -o-linear-gradient(bottom, #82c500, #000000);
                境界線の色: 透明;
            }

            /* サブメニューを示す矢印 */
            #cssmenu > ul .has-sub>a::after {
                コンテンツ： '';
                位置: 絶対;
                上: 34px;
                右: 8px;
                幅: 0px;
                高さ: 0px;

                /* ボーダーを使用して矢印を作成する */
                境界線: 4px の無地の透明。
                ボーダー左: 4px ソリッド #d8d8d8;
            }

            /* 同じ矢印ですが、影の効果を作成するために色が濃くなっています */
            #cssmenu > ul .has-sub>a::before {
                コンテンツ： '';
                位置: 絶対;
                上: 35px;
                右: 8px;
                幅: 0px;
                高さ: 0px;

                /* ボーダーを使用して矢印を作成する */
                境界線: 4px の無地の透明。
                ボーダー左: 4px ソリッド #000;
            }

            /* ホバー時の矢印の色を変更 */
            #cssmenu > ul li>a:hover::after, #cssmenu > ul li:hover>a::after {
                border-left: 4px ソリッド #fff;
            }

            #cssmenu > ul li>a:hover::before, #cssmenu > ul li:hover>a::before {
                border-left: 4px ソリッド rgba(0, 0, 0, .3);
            }


            /* サブメニュー */
            #cssmenu > ul ul {
                位置: 絶対;
                左:95%;
                幅:100%;
                上: -9999px;
                パディング左: 5px;
                不透明度: 0;
                /* 不透明度遷移を使用して作成されたフェード効果 */
                -webkit-transition: 不透明度 .2s イーズイン;
                -moz-transition: opacity .2s イーズイン;
                -o-transition: opacity .2s イーズイン;
                -ms-transition: opacity .2s イーズイン;
            }

            /* ユーザーが親リンクをホバリングしているときにサブメニューを表示する */
            #cssmenu > ul li:hover>ul {
                上: -2px;
                不透明度: 1;
            }

誰かアイデアを教えてください。

4

2 に答える 2

2

OK、これを使用して問題を解決しました。要素の外側のクリックを検出するにはどうすればよいですか？

今、私はウェブサイトのフッターにこのようなものを持っています：

     $（'html'）。click（function（）{
            hiddenSubMenu（）;
     }）;
     $（ "＃cssmenu"）。click（function（event）{
            event.stopPropagation（）;
     }）;

そして、サブメニューをクリックすると、サブメニューを表示するsubMenu関数を呼び出します。

    <div id='cssmenu'>
    <ul>
      <li class='has-sub '><a href='#' onclick="subMenu('handleSubMenu1')">
    ...
于 2013-03-10T13:23:04.307 に答える
0

私の知る限り、CSS だけではこれを行うことはできず、javascript/jQuery を使用する必要があります。

于 2013-03-10T12:09:27.240 に答える