gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:57:42 25 4
gpt4 key购买 nike

我有一个顶部菜单,我想在移动浏览器中将其显示在主菜单下拉菜单的底部。像这样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; }

最佳答案

要达到您想要的类似效果,您可能需要做一些肮脏的 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;}
}

关于html - 如何在主菜单中显示顶级菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33408677/

25 4 0