Por qué Ul espacio en blanco superior

Cuando pongo una lista desordenada

entonces por qué la barra superior baja? No puedo encontrar la razón detrás de esto. ¿Dime cómo solucionar este problema?

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>

Respuestas a la pregunta(2)

Su respuesta a la pregunta