HTML Liste li Elemente untereinander

Question

Ich habe dieses HTML aber die Punkte der unordered list werden nebeneinander angezeigt statt untereinander.

<style>
.nav { 
  width: 200px;
  //float: left; 
}

.nav li {
  list-style-type: none;
  float: left;
}

.container {
  width: 600px;
  margin: auto;
  margin-top: 0;
}
</style>

<div class="nav">
  <ul>
    <li>Home</li>
    <li>Work</li>
    <li>Contact</li>
  </ul>
</div>

<div class="container">
Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum do  lor sit amet consectetuer lacus.
</div>

Wie mache ich die 3 Menüpunkte untereinander?

Answer 1

Du musst das "float: left" vom li-Element entfernen und zum nav-Element hinzufügen.

.nav {
  width: 200px;
  float: left;
}

.nav li {
  list-style-type: none;
}

.container {
  width: 600px;
  margin: auto;
  margin-top: 0;
}

Hier eine Demo.

Answer 2

Hier ist ein Beispiel.

<style>
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 25%;
  background-color: #f1f1f1;
  position: fixed;
  height: 100%;
  overflow: auto;
}

li a {
  display: block;
  color: #000;
  padding: 8px 16px;
  text-decoration: none;
}

li a.active {
  background-color: #04AA6D;
  color: white;
}

li a:hover:not(.active) {
  background-color: #555;
  color: white;
}
</style>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">Work</a></li>
  <li><a href="#contact">Contact</a></li>
</ul>

<div style="margin-left:25%;padding:1px 16px;height:1000px;">
  <p>Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus. Lorem ipsum dolor sit amet consectetuer lacus.</p>
</div>

JSFiddle