动态/移动菜单中的菜单标题

Question

好的，简单地说，我最近在我的一个导航链接中加入了一个下拉菜单，你点击导航选项，菜单就会被淹没，没问题，但是当你在移动设备上查看网站时，尽管菜单选项在那里，标题却没有。

我的正常导航菜单如下：

相关产品的贴合

以products为下拉式部件。

这就是我现在在手机菜单上看到的，

首页 关于 家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>

希望这能让事情变得更清楚。这是我的桌面导航。

​

这是移动导航。

​

我知道排列不对，但现在我只想把移动元素修好..

因此，基本上，我希望标题Products出现在移动导航菜单中。我以为它会自动出现，但我显然做错了什么。

任何帮助都将受到感谢！

李

Answer 1

从你的代码中我只能知道你想让# can下拉列表在左边.把这个css代码添加到你的css中..。

CSS:-

#cssdropdown { margin-left:5px; } //Increase it as your wish