1

簡単に言うと、最近、ナビゲーション リンクの 1 つにドロップダウン メニューを組み込みました。ナビゲーション オプションをクリックすると、メニューがドロップダウンします。問題はありませんが、モバイル デバイスでサイトを見ると、メニューオプションはありますが、見出しはありません..

私の通常のナビゲーションメニューは次のとおりです。


ホーム 製品について 地金 連絡先


製品がドロップダウン部分です。

これは私が現在モバイルメニューで取得しているものです。

ホーム
概要
ホーム 1
ホーム 2
ホーム 3
ホーム 4
地金
連絡先

そして、これは私がそれをどのように見せたいかです

ホーム製品
について   ホーム 1    ホーム 2    ホーム 3    ホーム 4 地金の連絡先






あなたは私と一緒にいますか？そう願ってい
ます。これがナビゲーション メニューのモバイル CSS です。

 /* Mobile UI */

#mobileUI-site-titlebar {
    background: url('images/headerM.png') 0px -35px;
    box-shadow: inset 0px 15px 30px 0px rgba(255,255,255,0.1);
}

#mobileUI-site-title {
    color: #fff;
    text-shadow: -1px -1px 1px rgba(0,0,0,1);
    line-height: 51px;
    font-size: 1.5em;
}

#mobileUI-site-nav-opener {
    width: 50px;
    background: url('images/mobileUI-site-nav-opener-bg.svg') 

center center no-repeat;
    text-indent: -9999em;
    height: 50px;
    opacity: 0.5;
}

#mobileUI-site-nav-opener:active {
    opacity: 1.0;
}

#mobileUI-site-nav {
    background: #1e1e1e top left repeat-x;
    box-shadow: inset -5px 0px 60px 0px rgba(0,0,0,0.25);
}

#mobileUI-site-nav-inner {
    padding: 1em 0 1em 0;
}

.mobileUI-site-nav-link {
    text-shadow: -1px -1px 0 rgba(0,0,0,0.25);
    color: #fff;
    text-decoration: none;
    font-size: 1.4em;
    padding: 0.5em 1em 0.5em 1em;
}

そして、これがナビゲーションメニューのhtmlです..

  <nav class="mobileUI-site-nav" id="site-nav">
                    <ul>
                        <li><a href="#">Homepage</a>

                        </li>
                        <li><a href="#">About Us</a>

                        </li>

                         <li class="headLink">Products
                                <ul id"cssdropdown">
                                    <li><a href="#">Home1</a>

                                    </li>
                                    <li><a href="#">Home4</a>

                                    </li>
                                    <li><a href="#">Home2</a>

                                    </li>
                                    <li><a href="#">Home3</a>

                                    </li>
                                    <li><a href="#">Home5</a>

                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">Bullion</a>

                            </li>
                            <li class="current_page_item"><a href="#">Contact Us</a>

                            </li>
                        </ul>
                </nav>

うまくいけば、これで少しわかりやすくなります..これが私のデスクトップナビゲーションです..
ここに画像の説明を入力


そしてこちらがモバイルナビ。
ここに画像の説明を入力


配置が外れていることはわかっていますが、今のところ、モバイル要素を修正したいだけです..
基本的に、見出しの製品がモバイルナビゲーションメニューに表示されるようにします. 自動的にそこにあると思っていましたが、明らかに何か間違っています。
どんな助けでもありがたく受け取られます！

リー

4

1 に答える 1

0

あなたのコードから、#cssdropdown を左に配置したいということしかわかりません...この css コードを css に追加するだけです...

CSS:-

#cssdropdown { margin-left:5px; } //Increase it as your wish
于 2013-03-22T11:49:38.830 に答える