How can I get the contents in my drop-down to become vertical instead of horizontal?

Question

I was trying to create a drop-down but whatever I do, the content in the drop-down lines up horizontally instead of vertically. I tried going to multiple you tube videos to see what they did but that didn't work. Also, I tried using 'position: absolute' but that didn't work. Please tell me what I need to do in order to get the content in my drop-down to be vertical. Here is my code.

body {
  background-repeat: no-repeat;
  background-size: cover;
  font-family: Arial;
}

ul {
  margin: 0px;
  padding: 10px;
  list-style: none;
}

ul li {
  float: left;
  position: relative;
  width;
  200px;
  height: 40px;
  background-color: black;
  opacity: 0.8;
  line-height: 20px;
  text-align: center;
  font-size: 15px;
}

ul li ul {
  display: block;
}

ul li a {
  color: white;
  text-decoration: none;
}

<ul>
  <li><a href='#'>Home</a></li>
  <li><a href='#'>Classes</a>
    <ul>
      <li><a href="#">Level 1</a></li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 3</a></li>
      <li><a href="#">Level 4</a></li>
      <li><a href="#">Level 5</a></li>
      <li><a href="#">Level 6</a></li>
    </ul>
  </li>
  <li><a href='#'>Programs</a>

    <ul>
      <li><a href="#">Level 1</a></li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 3</a></li>
      <li><a href="#">Level 4</a></li>
    </ul>
  </li>
  <li><a href='#'>Contact</a></li>
  <li><a href='#'>Home-Work</a>
    <ul>
      <li><a href="#">Level 1</a></li>
      <li><a href="#">Level 2</a></li>
      <li><a href="#">Level 3</a></li>
      <li><a href="#">Level 4</a></li>
      <li><a href="#">Level 5</a></li>
      <li><a href="#">Level 6</a></li>
    </ul>

  </li>
</ul>