click-touch menu-navigation dropdown

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> 

с выпадающим кулинарным полем/кнопкой, которая при нажатии/прикоснулась будет отображать второй заголовок в качестве одной ниспадающей линии непосредственно ниже кнопок/Cooking коробки. Любая помощь будет принята с благодарностью.

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 
} 

Надеюсь, что это поможет.