HTML-CSS. Szimbólumos felsorolás legördülő menünél nem müködik. Mit írjak át h működjön?

Itt a CSS része: body{

margin: 0;

padding: 0;

}

#top-menu {

float:left;

}

#top-menu li {

display:inline;

list-style:none;

float:left;

}

#top-menu li a {

display:block;

}

#top-menu li ul {

display:none;

position:absolute;

z-index:1;

}

#top-menu li li {

float:none;

list-style:none;

margin:0;

padding:0;

border:0;

}

#top-menu li:hover ul {

float:none;

display: block;

}

#top-menu li li a {

display:block;

overflow:hidden;

}

</style>

Ez meg a HTML:

<ul id="top-menu">

<li><font color="#FFFF00">Január</font>

<ul imagesrc="kl.png">

<li><a href="/"><font color="#FFFF00">04.Szerda</font></a></li>

<li><a href="/"><font color="#FFFF00">05.Csütörtök</font></a></li>

<li><a href="/"><font color="#FFFF00">06.Péntek</font></a></li>

</ul>

</li>

Az UL-tag után ha odarakom a képet h legyen szimbólum a felsorolás előtt akkor nem működik a menü...Mit írjak át h a menü is működjön de a szimbólum is megjelenjen a felsorolással egy sorban mikor ráviszem a kurzort??