Question

我目前正在为一个学校项目开发一个Mega-Menu，它必须是下拉式的。我们在整个项目中使用了Foundation和Laravel。

我一直试图找到一种在巨型菜单中使用colomns的方法，有点像this website

但是，以下代码是唯一能够像我希望的那样工作的解决方案。它有我想要的四个colomns，但我无法通过悬停触发它。我的JQuery不起作用，我找不到通过CSS / SASS选择下拉菜单的方法。

所以，我有两个问题：是否有更好的方法来格式化此菜单（在HTML中），如何激活悬停触发器以激活菜单？

这是我的HTML代码（缩短，因为它很长）：

<nav class="navbar navbar-default navbar-static-top large-12">
    <div class="container">
        <div class="container top-bar hide-for-small-only">
            <div class="top-bar-left">
                <div class="row dropdown menu" data-dropdown-menu>
                    <ul class="large-3 m-menu dropdown-content">
                        <li class=""><a href="#">Technologie Verte</a></li>
                        <li class=""><a href="/projets/categories/1">Énergie Verte</a></li>
                        <li class=""><a href="/projets/categories/2">Anti-Pollution</a></li>
                        <li class=""><a href="/projets/categories/3">Implants</a></li>
                        <li class=""><a href="/projets/categories/4">Santé</a></li>
                        <li class=""><a href="/projets/categories/5">Technologie Biologique</a></li>
                    </ul>
                    <ul class="large-3 m-menu dropdown dropdown-content">
                        <li class=""><a href="#">Divertissement</a></li>
                        <li class=""><a href="/projets/categories/6">Réalité Augmentée (AR)</a></li>
                        <li class=""><a href="/projets/categories/7">Réalité Virtuelle (VR)</a></li>
                        <li class=""><a href="/projets/categories/8">Jeux Vidéos</a></li>
                        <li class=""><a href="/projets/categories/9">Holograms</a></li>
                        <li class=""><a href="/projets/categories/10">Gadgets</a></li>
                    </ul>
                    <ul class="large-3 m-menu dropdown dropdown-content">
                        <li class=""><a href="#">Utilitaires</a></li>
                        <li class=""><a href="/projets/categories/11">Wearables</a></li>
                        <li class=""><a href="/projets/categories/12">Audio</a></li>
                        <li class=""><a href="/projets/categories/13">Impression 3D</a></li>
                        <li class=""><a href="/projets/categories/14">Maison Intelligente</a></li>
                        <li class=""><a href="/projets/categories/15">Applications</a></li>
                    </ul>
                    <ul class="large-3 m-menu dropdown dropdown-content">
                        <li class=""><a href="#">Futuristes</a></li>
                        <li class=""><a href="/projets/categories/16">Spatial</a></li>
                        <li class=""><a href="/projets/categories/17">Temporel</a></li>
                        <li class=""><a href="/projets/categories/18">Armée</a></li>
                        <li class=""><a href="/projets/categories/19">Transportation</a></li>
                        <li class=""><a href="/projets/categories/20">Intelligence Artificielle (AI)</a></li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</nav>

我所拥有的CSS无效，所以如果有人需要它，我很乐意发布它。在此先感谢大家的回复！我还会尝试发布它看起来像的图片，但是我目前在Wampserver上遇到了一些问题，所以我会尽快发布它

使用Foundation，JQuery的下拉菜单

0 个答案: