Question

我尝试了解如何在此网站上执行垂直下拉菜单：http://haririsportsandmedicals.de/

当onClick事件发生时它应该“下拉”而不是在mousover。

有没有人为此做过这样的代码示例？

非常棒，谢谢。

Answer 1

看看这个。我认为它非常接近你所寻求的。

演示：http://designshack.net/tutorialexamples/verticalnav/index.html

教程/指南：http://designshack.net/articles/css/verticalaccordionav/

Answer 2

试试这个。

<强> HTML

<div>
    <ul>
        <li><a href="#">Menu 1</a></li>
        <li><a href="#">Menu 2</a>
            <ul>
                <li><a href="#">Sub menu 1</a></li>
                <li><a href="#">Sub menu 2</a></li>
            </ul>
        </li>
        <li><a href="#">Menu 3</a></li>
        <li><a href="#">Menu 4</a></li>
    </ul>
<div>

<强> CSS

*{
    padding: 0px;
    margin: 0px;
}

li{
    list-style: none;
}

li a{
    text-decoration: none;
    height: 26px;
    display: inline-block;
}

li ul{
    display: none;
}

li li a{
    margin-left: 10px;    
}

<强>的jQuery

$(document).ready(function(){
    $('li').click(function(){
        $(this).children('ul').toggle();
    });
});

Demo

如何做垂直下拉菜单？

2 个答案: