3 poziomowe menu - przerobienie

Witam wszystkich serdecznie. Posiadam zrobione 2 poziomowe menu lecz potrzebowałbym jednak trzy-poziomowe i niestety nie wychodzi mi. Nie mam pojęcia co robię źle. Pomoże mi ktoś z tym?

Kod HTML

 
<ul id="menu">  
<li id="rozwijany"><a href="#"><img
 src="grafika/....png" /></a>
    <ul id="submenu">
      <li><a href="#"><img src="grafika/....png" /></a></li>
      <li><a href="#"><img src="grafika/....png" /></a></li>
    </ul>
  </li>
  <li><a href="#"><img src="grafika/....png" /></a></li>
  <li id="rozwijany"><a href="#"><img
 src="grafika/....png" /></a>
    <ul id="submenu">
      <li><a href="#"><img src="grafika/....png" /></a></li>
      <li><a href="#"><img src="grafika/....png" /></a></li>
      <li><a href="#"><img src="grafika/....png" /></a></li>
    </ul>
  </li>
  <li><a href="#"><img src="grafika/....png" /></a></li>
  <li><a href="#"><img src="grafika/....png" /></a></li>
</ul>

Kod CSS

 
ul#menu
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
height: 100%;
width: 7em;
color: black;
margin-right:40px;
}
ul#menu li a
{
float: left;
width: 5em;
color: black;
padding: 0.05em 0em;
text-decoration: none;
}
ul#menu li a:hover
{
color: black;
}
ul#submenu
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 7em;
color: black;
margin-right:10px;
}
ul#submenu2
{
padding: 0;
margin: 0;
list-style-type: none;
float: left;
width: 7em;
color: black;
margin-right:10px;
}
ul#submenu li a
{
float: left;
width: 5em;
padding: 0.05em 1em;
text-decoration: none;
}
ul#submenu li a:hover
{
color: black;
}
#rozwijany:hover li { display: block;}
#rozwijany li { display: none; }