Многоуровневое аккордеонное меню / Кнопки не отображаются

Question

Я настроил многоуровневое меню соответствия из Интернета.

Вот HTML / CSS

<style>

/* reset css */

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block }

body { line-height: 1 }

ol, ul { list-style: none }

blockquote, q { quotes: none }

strong {font-weight:bold;}

emph {background-color: blue;}

attention {color: red;}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none
}

table {
  border-collapse: collapse;
  border-spacing: 0
}

body {
  font: 100% "roboto", "Trebuchet MS", sans-serif;
  background-color:#FFFFFF;
}

a { text-decoration: none; }

/**
 * Hidden fallback
 */


/**
 * Styling navigation
 */

header {
  margin-right: auto;
  margin-left: auto;
  max-width: 42.5rem;
  margin-top:150px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
}

/**
 * Styling top level items
 */

.nav a, .nav label {
  display: block;
 padding: .85rem;
  color: #fff;
  background-color: #151515;
  box-shadow: inset 0 -1px #1d1d1d;
  -webkit-transition: all .25s ease-in;
  transition: all .25s ease-in;
}

.nav a:focus, .nav a:hover, .nav label:focus, .nav label:hover {
  color: rgba(255, 255, 255, 0.5);
  background: #030303;
}

.nav label { cursor: pointer; }

/**
 * Styling first level lists items
 */

.group-list a, .group-list label {
  padding-left: 2rem;
  background: #252525;
  box-shadow: inset 0 -1px #373737;
}

.group-list a:focus, .group-list a:hover, .group-list label:focus, .group-list label:hover { background: #131313; }



.group-list a:target {background: #F00000}
/**
 * Styling second level list items
 */

.sub-group-list a, .sub-group-list label {
  padding-left: 4rem;
  background: #353535;
  box-shadow: inset 0 -1px #474747;
}

.sub-group-list a:focus, .sub-group-list a:hover, .sub-group-list label:focus, .sub-group-list label:hover { background: #232323; }

/**
 * Styling third level list items
 */

.sub-sub-group-list a, .sub-sub-group-list label {
  padding-left: 6rem;
  background: #454545;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-group-list a:focus, .sub-sub-group-list a:hover, .sub-sub-group-list label:focus, .sub-sub-group-list label:hover { background: #333333; }


/**
 * Styling fourth level list items
 */

.sub-sub-sub-group-list a, .sub-sub-sub-group-list label {
  padding-left: 8rem;
  background: #454545;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-sub-group-list a:focus, .sub-sub-sub-group-list a:hover, .sub-sub-sub-group-list label:focus, .sub-sub-sub-group-list label:hover { background: #333333; }


/**
 * Styling fith level list items
 */

.sub-sub-sub-sub-group-list a, .sub-sub-sub-sub-group-list label {
  padding-left: 10rem;
  background: #454545;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-sub-sub-group-list a:focus, .sub-sub-sub-sub-group-list a:hover, .sub-sub-sub-sub-group-list label:focus, .sub-sub-sub-sub-group-list label:hover { background: #333333; }


/**
 * Styling sixth level list items
 */

.sub-sub-sub-sub-sub-group-list a, .sub-sub-sub-sub-sub-group-list label {
  padding-left: 12rem;
  background: #454545;
  box-shadow: inset 0 -1px #575757;
}

.sub-sub-sub-sub-sub-group-list a:focus, .sub-sub-sub-sub-sub-group-list a:hover, .sub-sub-sub-sub-sub-group-list label:focus, .sub-sub-sub-sub-sub-group-list label:hover { background: #333333; }



/**
 * Hide nested lists
 */

.group-list, .sub-group-list, .sub-sub-group-list, .sub-sub-sub-group-list, .sub-sub-sub-sub-group-list, .sub-sub-sub-sub-sub-group-list, .sub-sub-sub-sub-sub-sub-group-list , .sub-sub-sub-sub-sub-sub-sub-group-list {
  height: 100%;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height .5s ease-in-out;
  transition: max-height .5s ease-in-out;
}

.nav__list input[type=checkbox]:checked + label + ul { /* reset the height when checkbox is checked */
max-height: 1000px; }

/**
 * Rotating chevron icon
 */

label > span {
  float: right;
  -webkit-transition: -webkit-transform .65s ease;
  transition: transform .65s ease;
}

.nav__list input[type=checkbox]:checked + label > span {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.button {
  font-size: 16px;
 width: 42.5rem;
 height: 2.5rem;
}


</style>
</head>


<body>
    <header role="banner">
        <nav class="nav" role="navigation">
            <ul class="nav__list">
                <li>
                    <input id="group-30" type="checkbox" hidden />
                    <label for="group-30"><span class="fa fa-angle-right"></span> Item 1</label>
                    <ul class="group-list">
                        <li>
                            <input id="sub-group-30-10" type="checkbox" hidden />
                            <label for="sub-group-30-10"><span class="fa fa-angle-right"></span> Sub Item 1-1</label>
                            <ul class="sub-group-list">
                                <li>
                                    <input id="sub-sub-group-30-10-10" type="checkbox" hidden />
                                    <label for="sub-sub-group-30-10-10"><span class="fa fa-angle-right"></span> Sub Sub Item 1-1-1 The quick brown fox <br> jumps over the lazy dog</label>
                                    <ul class="sub-sub-group-list">
                                    <li>
                                        <input id="sub-sub-sub-group-30-10-10-1" type="checkbox" hidden />
                                        <label for="sub-sub-sub-group-30-10-10-1"><span class="fa fa-angle-right"></span> Sub Sub Sub Item 1-1-1-1</label>
                                        <ul class="sub-sub-sub-group-list">
                                            <li>
                                                <input id="sub-sub-sub-group-30-10-10-1-1" type="checkbox" hidden />
                                                <label for="sub-sub-sub-group-30-10-10-1-1"><span class="fa fa-angle-right"></span> Sub-Sub Sub Sub Item 1-1-1-1-1</label>
                                                <ul class="sub-sub-sub-group-list">
                                                <li></li>
                                                </ul>
                                            </li>
                                        </ul>
                                        <input id="sub-sub-sub-group-30-10-10-2" type="checkbox" hidden />
                                        <label for="sub-sub-sub-group-30-10-10-2"><span class="fa fa-angle-right"></span> Sub Sub Sub Item 1-1-1-2</label>
                                        <ul class="sub-sub-sub-group-list">
                                            <li>
                                                <button class="button" >Button 1 Label</button>
                                                <li>&lt;b&gt;Tag 1:&lt;/b&gt; xxxxxxxxx<br>&lt;b&gt;Tag 2:&lt;/b&gt; The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.<br>&lt;b&gt;Tag 3:&lt;/b&gt; Tage 4<br>&lt;b&gt;Tag 5:&lt;/b&gt; The quick brown fox jumps over the lazy dog<br>&lt;b&gt;Tag 6:&lt;/b&gt; The quick brown fox<br>&lt;b&gt;Tag 7:&lt;/b&gt; The quick brown fox jumps over the lazy dog</li>
                                                <button class="button" >Button 2 Label</button>
                                                <button class="button" >Button 3 Label</button>

                                            </li>           
                                            <li>
                                                <input id="sub-sub-sub-sub-group-30-10-10-2-1" type="checkbox" hidden />
                                                <label for="sub-sub-sub-sub-group-30-10-10-2-1"><span class="fa fa-angle-right"></span> Sub Sub Sub Sub Item 1-1-1-2-1</label>
                                                <ul class="sub-sub-sub-sub-group-list">
                                                    <li>
                                                        <button class="button" >Button 1 of 5</button>
                                                        <button class="button" >Button 2 of 5</button>
                                                        <button class="button" >Button 3 of 5</button>
                                                        <button class="button" >Button 4 of 5</button>
                                                        <button class="button" >Button 5 of 5</button>

                                                    </li>
                                                    <li>
                                                        <input id="sub-sub-sub-sub-group-30-10-10-2-2" type="checkbox" hidden />
                                                        <label for="sub-sub-sub-sub-group-30-10-10-2-2"><span class="fa fa-angle-right"></span> Sub-Sub Sub Sub Sub Item 1-1-2-1-1</label>
                                                        <ul class="sub-sub-sub-sub-group-list"> 
                                                            <li>
                                                                <button class="button" >Button 1 Label</button>
                                                                <li>&lt;b&gt;Tag 1:&lt;/b&gt; xxxxxxxxx<br>&lt;b&gt;Tag 2:&lt;/b&gt; The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.<br>&lt;b&gt;Tag 3:&lt;/b&gt; Tage 4<br>&lt;b&gt;Tag 5:&lt;/b&gt; The quick brown fox jumps over the lazy dog<br>&lt;b&gt;Tag 6:&lt;/b&gt; The quick brown fox<br>&lt;b&gt;Tag 7:&lt;/b&gt; The quick brown fox jumps over the lazy dog</li>
                                                                <button class="button" >Button 2 Label</button>
                                                                <button class="button" >Button 3 Label</button> 
                                                            </li>
                                                            <li>
                                                                <input id="sub-sub-sub-sub-sub-sub-group-30-10-10-2-1-2-1" type="checkbox" hidden />
                                                                <label for="sub-sub-sub-sub-sub-sub-group-30-10-10-2-1-2-1"><span class="fa fa-angle-right"></span> Sub Sub Sub Sub Sub Sub Item 1-1-2-1-2-1</label>
                                                                <ul class="sub-sub-sub-sub-sub-sub-group-list"> 
                                                                    <li>
                                                                        <button class="button" >Button 1 of 5</button>
                                                                        <button class="button" >Button 2 of 5</button>
                                                                        <button class="button" >Button 3 of 5</button>
                                                                        <button class="button" >Button 4 of 5</button>
                                                                        <button class="button" >Button 5 of 5</button>
                                                                    </li>                                       
                                                                </ul>
                                                            </li>
                                                        </ul>
                                                    </li>                                   
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    </ul>
                                </li>
                            </ul>
                        </li>           
                    </ul>       
                </li>
            </ul>
        </nav>
    </header>

Вот jfiddle

https://jsfiddle.net/anotherjsfiddleuser/2geot61w/

Проблема в том, что если вы нажмете Sub-Sub Sub Sub Sub 1-1-2-1-1 , то кнопки с 1 по 5 из 5 не будут показаны, а будут только кнопки с 1 по 2. Это потому, что это седьмой уровень или в моем HTML / CSS есть ошибка? Что я мог сделать, чтобы решить это? Кто-нибудь может помочь? Спасибо в andvance

Answer 1

Заменить HTML указанный ниже код

                                                <li>
<b>Tag 1:</b> xxxxxxxxx
<b>Tag 2:</b> The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
<b>Tag 3:</b> Tage 4
<b>Tag 5:</b> The quick brown fox jumps over the lazy dog
<b>Tag 6:</b> The quick brown fox
<b>Tag 7:</b> The quick brown fox jumps over the lazy dog                                                
                                                </li>