Lista i lista

Jag har en meny som ligger till vänster på min sida där länkarna ska ligga under varandra och ifall man klickar på en länk så ska en undermeny dyka upp (dock ej med javascript). Den här koden har jag ('Länk 3' är klickad på):

<div id="menu">
  <ul>
    <li><a href="">Länk 1</a></li>
    <li><a href="">Länk 2</a></li>
    <li><a href=""><u>Länk 3</u></a>
      <ul id="submenu">
        <li><img src="images/pil.gif" alt="Underlänk 1" /> Underlänk 1</li>
        <li><a href="">Underlänk 2</a></li>
        <li><a href="">Underlänk 3</a></li>
      </ul>
    </li>
    <li><a href="">Länk 4</a></li>
    <li><a href="">Länk 5</a></li>
  </ul>
</div>

Och så här ser min CSS-kod ut:

#menu {
  padding: 2px 0px 19px 20px;
  font: bold 11px arial,verdana,sans-serif;
  color: #525049;
}
#menu h3 {
  color: #000000;
  font: bold 13px verdana,arial,sans-serif;
  margin-bottom: 10px;
}
#menu a {
  color: #525049;
  text-decoration: none;
}
#menu ul {
  list-style-type: none;
  display: block;
}
#menu li {
  height: 15px;
  margin-top: 3px;
  text-transform: uppercase;
  background-color: #F1F0E9;
  border-top: 3px solid #F1F0E9;
  border-right: 2px solid #F1F0E9;
  border-bottom: 2px solid #F1F0E9;
  border-left: 3px solid #F1F0E9;
}
#submenu {
  background-color: #F1F0E9;
  display: block;
}
#submenu li {
  color: #525049;
  margin: 0px;
  padding-left: 0px;
  font: bold 11px arial,verdana,sans-serif;
  text-transform: none;
}
#submenu a {
  text-decoration: none;
}
#submenu li a {
  padding-left: 14px;
}
#submenu strong {
  font: bold 11px arial,verdana,sans-serif;
}

Problemet är att 'Länk 4' och 'Länk 5' lägger sig ovanpå undermenyn som öppnats under 'Länk 3'. Hur får jag dem att hamna nedanför undermenyn?