html - 模板导航栏悬停下拉菜单

Question

谁能告诉我他们是如何在给定模板中创建这个导航栏的。

http://templates.entheosweb.com/template_number/live_demo.asp?TemplateID=38947

我只需要知道他们是如何为“服务”这样的链接制作下拉菜单的。

谢谢

Answer 1

好吧，您可以使用列表下的列表来制作下拉列表，然后使用 jquery 显示和隐藏元素...

<ul class="menu">
<li>Main
    <ul class="dropdown">
        <li>Sub</li>
        <li>Sub</li>
        <li>Sub</li>
        <li>Sub</li>
    </ul>
</li>

然后，使用 CSS 隐藏下拉菜单...

.dropdown {
  display: none;
}

使用一点点 jquery 和函数 .slideToggle() 触发“点击”以显示子菜单。

$('.menu').children('li').on('click', function() {
   $(this).children('ul').slideToggle('slow'); 
});

希望这对你有帮助...

这是一个jsFiddle