0

コンピューター/ラップトップ画面やタブレット/iPad で表示すると、サイドバー メニューはまったく問題なく表示されますが、何らかの理由で、モバイルビューでメニューの子項目が表示されません。

ここにリンクを表示

menu から theme.css の下の CSS Mobile バージョンに追加しようとしましたが、それでも Child 項目が表示されません。なぜ機能しないのかわかりませんか？それは私を困惑させている ！

私が見逃した何かがあるかどうかを確認するために、誰かが別の目を貸してくれるとは思いませんか? とても感謝しております！

以下は、モバイル ビューの現在の CSS です。

#widget_nav_menu li {
    clear: both;
    float: left;
    list-style: none; 
    text-align: center;
    width: 313px;
    /* padding: 5px;
     margin: 5px;*/
    background: #f4f8fa;
    border-bottom: 1px solid #c3ced5;
    height: 34px;
    text-indent: none;
    color: #174267;
}

#widget_nav_menu a {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #174267;
    text-decoration: none;
    display: block;
    padding: 11px 0 15px 7px;
}

#widget_nav_menu a.active,
#widget_nav_menu a:hover {
    background-image: url(images/hover_bg.png);
    background-position: right -5px;
    /*position: absolute;*/
    /*z-index: 10;*/
    color: #fff;
    /*margin-right: -17px;*/
}

#widget_nav_menu li.current_page_item a {
    background-image: url("images/hover_bg_small.png");
    background-position: right -5px;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    padding: 11px 0;
    width: 318px;
}

#widget_nav_menu li a:hover {
    background-image: url("images/hover_bg_small.png");
    background-position: right -5px;
    color: #FFFFFF;
    display: block;
    margin: 0 auto;
    padding: 11px 0;
    width: 318px; 
}

#widget_nav_menu a:hover li {
}

#widget_nav_menu .sub-menu {
    /* margin-left:10px; */
}

        #widget_nav_menu li ul {
            position: absolute;
            width: 318px
            left: -999em;
        }
        #widget_nav_menu li:hover ul {
            left: auto;
        }

        #widget_nav_menu li:hover ul, #widget_nav_menu li.sfhover ul {
            left: auto;
        }

            /*** Multi Level ***/
            #widget_nav_menu li ul ul {
                margin: -1em 0 0 10em;
            }

            #widget_nav_menu li:hover ul ul, #widget_nav_menu li.sfhover ul ul {
                left: -999em;
            }

        #widget_nav_menu li ul li.current_page_item a:hover {
            width: 318px;
            background-image: url("images/hover_bg_small.png");
            background-position: right -5px;
            color: #fff;
            margin-right: -17px;
        }

.menu-sectors-container li {
    clear: both;
    float: left;
    list-style: none;
    width: 318px;
    background: #f4f8fa;
    border-bottom: 1px solid #c3ced5;
    height: 34px;
    text-indent: none;
    color: #174267;
}
.menu-sectors-container li a {
    font-family: Arial, sans-serif;
    font-size: 13px;
    color: #174267;
    text-decoration: none;
    display: block;
    padding: 7px 0px 7px 7px;
}
.menu-sectors-container li a:active,
.menu-sectors-container li a:hover {
    width: 318px;
    background-image: url(images/hover_bg.png);
    background-position: right -5px;
    position: absolute;
    z-index: 1005;
    color: #fff;
    margin-right: -17px;
    padding:11px 0 13px 10px;
}
.menu-sectors-container li a:hover li {}

ありがとう！

4

2 に答える 2

0

問題を修正しました。モバイルセクションの下に2つのサブメニューがありましたが、私は気づいていませんでした。他のクラスがまだ適用されていたので、1つと何かが起こらないことを編集することが理由です！

于 2013-02-26T19:33:35.290 に答える
0

タッチ デバイスではマウス カーソルがないため、ホバー状態が存在せず、サブナビ リストを表示するかどうかがわかりません。一部のデバイスはクイックタップをホバーとして扱いますが、AFAIK は標準的な動作ではありません。

「touchstart」のようなタッチ イベントの単純な JavaScript リスナーでうまくいくはずです。

于 2013-02-26T14:01:33.057 に答える