Menu bereidt niet goed uit

[Tessa123212]

hallo,

Ik heb een menu gemaakt met 4 kopjes. Bij het kopje informatie staat een plusje en als je op het plusje drukt komen er nieuwe kopjes onder. Dit moeten er 21 zijn, maar hij gaat maar tot de 11 terwijl ik er wel 21 heb ingevoerd. Hoe moet ik dit oplossen? hieronder de code.

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">Home</a>		
  <button class="accordion"><a href="#">Informatie</a> </button>
  	<div class="panel">
  		

  		<tr id= "two">
  		
			<li><a href="homepage.html">1</a></li>
			<li><a href="sporten.html">2</a></li>
			<li><a href="paralympische_spelen.html">3</a></li>
			<li><a href="prijzen.html">4</a></li>
			<li><a href="financieren.html">5</a></li>
			<li><a href="boycots.html">6</a></li>
			<li><a href="foto.html">7</a></li>
			<li><a href="homepage.html">8</a></li>
			<li><a href="sporten.html">9</a></li>
			<li><a href="paralympische_spelen.html">10</a></li>
			<li><a href="prijzen.html">11</a></li>
			<li><a href="financieren.html">12</a></li>
			<li><a href="boycots.html">13</a></li>
			<li><a href="foto.html">14</a></li>
			<li><a href="homepage.html">15</a></li>
			<li><a href="sporten.html">16</a></li>
			<li><a href="paralympische_spelen.html">17</a></li>
			<li><a href="prijzen.html">18</a></li>
			<li><a href="financieren.html">19</a></li>
			<li><a href="boycots.html">20</a></li>
			<li><a href="foto.html">21</a></li>
	 
			
		</tr>
  	
  	</div>
  <a href="#">Over de makers</a>		
  <a href="#">Contact</a>			
</div>

en de CSS

/* The side navigation menu */
.sidenav {
    height: 100000px; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 1; /* Stay on top */
    top: 0;
    left: 0;
    background-color: #111; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}

/* The navigation menu links */
.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
    font-family:Helvetica;


}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

/* Position and style the close button (top right corner) */
.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
    .sidenav {padding-top: 15px;}
    .sidenav a {font-size: 18px;}
 }
 
/* Style the buttons that are used to open and close the accordion panel */
 button.accordion {
    background-color: #111;
    color: #111;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
 button.accordion.active, button.accordion:hover {
    background-color: #111;
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 0px;
    background-color: black;
    display: none;
}

/* The "show" class is added to the accordion panel when the user clicks on one of the buttons. This will show the panel content */
div.panel.show {
    display: block !important;
}

div.panel {
    padding: 0 0px;
    background-color: black;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}

button.accordion {
    background-color: #111;
    color: #444;
    cursor: pointer;
    padding: 0px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

button.accordion.active, button.accordion:hover {
    background-color: #111;
}

button.accordion:after {
    content: '\02795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-right: 15px;

}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 0px;
    background-color: #111;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panel.show {
    opacity: 1;
    max-height: 500px;  
}

li {
	margin-left: 20px;
	list-style: none;
}

alsvast bedankt

 

[bron]

Hoi.

Ik kan je niet helpen met de oplossing want er ontbreekt javascript bij je code. Wel zie ik dat je <tr> gebruikt waar <ul id= "two"> hoort te staan alhoewel je in de rest van het menu ook geen <ul> + <li> gebruikt. In de css hoort aan het eind van elke eigenschap een punt-komma te staan.

Suc6.