html - 如何在主菜单中显示顶级菜单？

Question

我有一个顶部菜单，我想在移动浏览器中将其显示在主菜单下拉菜单的底部。像这样http://dgmanila.com/

这是链接:http://mobiletest.me/apple_ipad/2502013

移动版 CSS:

.top-menuv2 ul{ float: none; display: block; clear: both; margin: 10px auto; text-align: center; }
.top-menuv2 li > ul > li{ top: 15px; }

Answer 1

要达到您想要的类似效果，您可能需要做一些肮脏的 HTML 和 CSS hack。

给这个UL一个class，比如only-desktop

<ul class="only-desktop">
    <li><a href="/testEnvironment/contacts/">Contacts</a></li>
    <li><a href="/testEnvironment/our-partners/">Our Partners</a></li>
    <li><a href="/testEnvironment/careers/">Careers</a>
        <ul>
            <li><a href="/testEnvironment/careers/a-career-with-home-credit/">A Career with Home Credit</a></li>
            <li><a href="/testEnvironment/careers/recruitment-process/">Recruitment Process</a></li>
            <li><a href="/testEnvironment/careers/vacancies/">Vacancies</a></li>
            <li><a href="/testEnvironment/careers/corporate-culture/">Corporate Culture</a></li>
        </ul>
    </li>
</ul>

然后像这样给css，

.only-desktop {display:block;}

@media screen and (max-width: 992px) /**This width could be anything you want *//
{
.only-desktop {display:none;}
}

然后在导航菜单的正下方添加相同的 UL，但给出不同的类

<ul class="only-mobile">
        <li><a href="/testEnvironment/contacts/">Contacts</a></li>
        <li><a href="/testEnvironment/our-partners/">Our Partners</a></li>
        <li><a href="/testEnvironment/careers/">Careers</a>
            <ul>
                <li><a href="/testEnvironment/careers/a-career-with-home-credit/">A Career with Home Credit</a></li>
                <li><a href="/testEnvironment/careers/recruitment-process/">Recruitment Process</a></li>
                <li><a href="/testEnvironment/careers/vacancies/">Vacancies</a></li>
                <li><a href="/testEnvironment/careers/corporate-culture/">Corporate Culture</a></li>
            </ul>
        </li>
    </ul>

CSS 将是，

.only-mobile {display:none;}

@media screen and (max-width: 992px) 
{
.only-mobile {display:block;}
}