如何做垂直下拉菜單？

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();
    });
});

演示版