Jquery 单击触摸菜单导航下拉菜单

我在谷歌上搜索了不少，但没有找到解决办法。我希望有人能帮忙。我有以下工作代码：

    <header data-role="header">
    <nav data-role="navbar">
        <a href="index.php">Home</a>
        <a href="autobio_overview.php">Autobiography</a>
        <a href="cooking_overview.php">Cooking</a>
        <a href="help.php">HELP</a>
        <a href="lmc_overview.php">Musical&nbsp;&amp;&nbsp;Drumming</a>
        <a href="horses.php">Horses</a>
        <a href="spiritual-quest.php">Spiritual/Weird&nbsp;Stuff</a>
        <a href="trains.php">Trains</a>
        <a href="webdev_overview.php">WebDev/Computer</a>
        <a href="contact.php">Contact</a>
        <!--<a href="family.php">Family&nbsp;History</a> -->
        <!--<a href="favlinks.php">Favorite&nbsp;Links</a> -->
    </nav>
</header>

及

烹饪页面：


烹饪书/书籍和音频/视频收集链接可能需要一点时间才能加载，请稍候！

每一个都可以在桌面上生成一行，这样就可以很好地工作了。但我想替换

<a href="cooking_overview.php">Cooking</a> 

---

带有一个下拉式烹饪盒/按钮，单击/触摸该按钮时，第二个标题将显示为烹饪盒/按钮正下方的一条下拉线。任何帮助都将不胜感激。

您可以将烹饪页面作为列表放在标题中的烹饪链接下。然后将列表隐藏起来。然后单击时显示它。我用了类似的东西

<a href="cooking_overview.php">Cooking</a>
<ol> 
<li><a href="cooking-asian_overview.php">Asian/Chinese&nbsp;Cooking</a></li>
<!--with the rest of the menu options-->
<ol>

---

希望这能有所帮助。

谢谢，但我想在烹饪按钮下面显示第二个标题菜单，基本上就像现在单击新的烹饪按钮时所写的那样……不要转到烹饪链接。我知道如何使用列表。我想让它显示第一行链接下面的第二行链接。我实际上尝试了上面的建议，但它没有按需要显示。

<a href="cooking_overview.php">Cooking</a>
<ol> 
<li><a href="cooking-asian_overview.php">Asian/Chinese&nbsp;Cooking</a></li>
<!--with the rest of the menu options-->
<ol>

ol li {
  display: none
}
ol li:clicked {
  display: block
}