CSS popup menu opening more submenus within a submenu

Question

CSS popup menu opening more submenus within a submenu

Navigation

#1 by (0 votes)
#2 by (-2 votes)

2

I know that to set up an accordion type menu is like this:

<html>
    <head>
        <style>
            .menu-sanfona li ul{
                display:none;
            }
            .menu-sanfona li:focus ul{
                display:block;
            }
        </style>
    </head>

    <body>
        <ul class="menu-sanfona">
            <li tabindex="0">Item 1
                <ul>
                    <li>Item 1.1</li>
                    <li>Item 1.2</li>
                </ul>
            </li>
            <li tabindex="1">Item 2
                <ul>
                    <li>Item 2.1</li>
                    <li>Item 2.2</li>
                </ul>
            </li>
        </ul>
    </body>
</html>

What I would like to know is how to set up an accordion type of menu that opens more menus within the open menus eg

Let's say I clicked on "Item 1" and opened a submenu called "Item 1.1". Okay!

Then when I click on "Item 1.1" it shows another submenu with "Item 1.1.1", "Item 1.1.2", "Item 1.1.3" ... How would this code be using only HTML and CSS ??

html

asked by anonymous 10.12.2016 / 03:19

2 answers

How do I determine the number that appears the most times and the position in which it is? Doubt how to mount socket in old game in Python [closed]

score 0 · Answer 1

The solution I found is as follows:

<ol class="menu-sanfona">
	<li>
    	<label for="Item-1">Item-1</label>
    	<input type="checkbox"  id="Item-1" />
   		<ol>
      		<li>
       			<label for="Item-1-1">Item-1-1</label>
        		<input type="checkbox" id="Item-1-1" />
        		<ol>
         			<li>
           				<label for="Item-1-1-1">Item-1-1-1</label>
           				<input type="checkbox" id="Item-1-1-1" />
           				<ol>
              				<li>
                				<label for="Item-1-1-1-1">Item-1-1-1-1</label>
               					<input type="checkbox" id="Item-1-1-1-1" />
                			</li>
            			</ol>
          			</li>
          		</ol> 
      		</li>
      	</ol>
	</li>
	<li>
    	<label for="Item-2">Item-2</label>
    	<input type="checkbox"  id="Item-2" />
   		<ol>
      		<li>
       			<label for="Item-2-1">Item-2-1</label>
        		<input type="checkbox" id="Item-2-1" />
        		<ol>
         			<li>
           				<label for="Item-2-1-1">Item-2-1-1</label>
           				<input type="checkbox" id="menu-2-1-1" />
           				<ol>
              				<li>
                				<label for="Item-2-1-1-1">Item-2-1-1-1</label>
               					<input type="checkbox" id="Item-2-1-1-1" />
                			</li>
            			</ol>
          			</li>
          		</ol> 
      		</li>
      	</ol>
	</li>
</ol>
<style>
ol.menu-sanfona{padding-left:30px; list-style:none;}
li{position:relative;}
li label{padding-left:37px;cursor:pointer;display:block;}
li input{position:absolute;left:-0.5em;top:0;opacity:0;cursor:pointer;}
li input + ol{height:33px;margin:-16px 0 0 -51px;}
li input + ol > li{display:none;}
li input:checked + ol{height:auto;margin:-23px 0 0 -51px;padding:33px 0 0 77px;}
li input:checked + ol > li{display:block;}
</style>

score -2 · Answer 2

@Andrei

I understood what you meant, but your question is kind of   complicated to understand because it is not very elaborate, but come on ..

To create what you want you need to do the same thing you did,   however inside another menu, here is a code that I made for you by   example according to the code you wrote above.
   <ul class="menu-sanfona">
        <li tabindex="0">Item 1
            <ul>
                <li>Item 1.1</li>
                <li>Item 1.2</li>
            </ul>
        </li>
        <li tabindex="1">Item 2
            <ul>
                <li>Item 2.1
                  <ul> 
                    <li>Item 2.2</li>
                  </ul>  
              </li> 
                <li>Item 2.2</li>
            </ul>
        </li>
    </ul>