Question

我谷歌搜索了很多但没有找到解决方案。我希望有人能帮帮忙。我有以下工作代码：

    <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>

和

<header data-role="header">
<nav>
Cooking Pages: 
    <a href="cooking-asian_overview.php">Asian/Chinese&nbsp;Cooking</a>
    <a href="cooking-equipment-gadgets-manuals.php">Cooking&nbsp;Equipment,&nbsp;Gadgets,&nbsp;&amp;&nbsp;Manuals</a>
    <a href="catalog.php?tablename=cooking_videos">
        Cooking&nbsp;Video Collection</a>
    <a href="cooking-favorite-restaurants.php">Favorite&nbsp;Restaurants</a>
    <a href="cooking-nonasian_overview.php">Non&#8209;Asian&nbsp;Cooking</a>
    <a href="cooking-cookbooks_old_downloadable.php">Old&nbsp;Downloadable&nbsp;Cookbooks</a>
    <a href="cooking-tea-coffee_overview.php">Tea&nbsp;&amp;&nbsp;Coffee</a>
<br>
<span class="red center">Cookbook/Book and Audio/Video Collection links may take a little time to load, please wait!</span>

这些工作正常，每个在桌面上生成一行。但我想替换

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

带下拉菜单/按钮，当点击/触摸时，将第二个标题显示为烹饪框/按钮正下方的单个下拉线。任何帮助将不胜感激。

Answer 1

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

<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>

然后我用css隐藏/显示列表。

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

希望有所帮助。

点击触摸菜单导航下拉列表

1 个答案: