Dropdown submenu

Hello, I tried to create a version of dropdown submenu based upon W3C school “How TO – Dropdown Sidebar” codes. I used Dreamweaver and previewed it on Safari and Chrome and it worked. However, when I transferred the code into the WordPress page. It did not work. Do you know what went wrong. Here is the code…

<style type="text/css">
	.immune-toxicity li{
		display:block;
		position:relative;
		list-style-type: none;
		border-bottom:solid 2px chocolate;
		
	}
	.immune-toxicity{
		display:block;
		width:60%;
		background:#F5EDB8;
		padding:10px 40px 10px 0px;
		margin: 0 auto;
		color:chocolate;
		font-size:1.2em;
		cursor:pointer;
		z-index:1;
		
		}
	
.cardiac-content a {
    color: #675046;
    padding: 12px 16px;
	background-color:#F3D4BC;
    text-decoration: none;
    display: block;
}
	
.cardiac-content{
  display: none;
  padding-left: 8px;
}
/*.fa-caret-down {
    float: right;
    padding-right: 8px;
}*/
.cardiac-tox:hover{color:#F3BBBC;}
.cardiac-content a:hover {background-color: #EB9B6B;}

	.active {
  background-color: #AC5506;
  color: white;
}
</style>

		<h3>Immune Adverse Reactions</h3>
	<div class="immune-toxicity">
		<ul>
		  <li class="cardiac-tox">Cardiovascular toxicities </li>
			<div class="cardiac-content">
				<li><a href="#">Link 1</a></li>
				<li><a href="#">Link 2</a></li>
			</div>
		<li>Endocrine toxicities</li>
		<li>GI toxicities</li>
		<li>Hematologic toxicites</li>
		<li>Lung toxicity</li>
		<li>Musculoskeletal toxicities</li>
		<li>Nervous system toxicities</li>
		<li>Ocular toxicities</li>
		
		  <div class="cardiac-content">
			  <li><a href="#">Link 3</a></li>
			  <li><a href="#">Link 4</a></li>
			</div>
		<li>Skin toxicities</li>
		</ul>
	<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("cardiac-tox");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var dropdownContent = this.nextElementSibling;
    if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
    } else {
      dropdownContent.style.display = "block";
    }
  });
}
</script>