Warum Ul oberen Leerraum

Wenn ich ungeordnete Liste

then warum geht die obere Leiste runter ?? Ich kann den Grund dafür nicht finden. Bitte sagen Sie mir, wie ich das Problem beheben kann.

http: //jsfiddle.net/fLchtkp1

body {
  margin: 0;
  padding: 0;
}
.top-bar {
  height: 40px;
  width: 100%;
  background-color: yellow;
}
#menu {
  width: 1020px;
  height: : 100%;
  margin: 0 auto;
  background-color: red;
}
ul {
  background-color: red;
  width: 100%;
  height: 40px;
}
<body>
  <div class="top-bar">
    <div id="menu">
      <ul>
        <li>Menu1</li>
      </ul>
    </div>
  </div>
</body>

Antworten auf die Frage(2)

Ihre Antwort auf die Frage