<style>
ol li {
float: left;
width: 100px;
}
ul li {
float: none;
width: auto;
}
li ul {
display: none;
margin-left: 0px;
padding-left: 5px;
}
li:hover ul {
display: block;
}
</style>
<ol>
<li>bla-bla
<ul>
<li> bla-bla, </li>
<li> bla-bla-bla, </li>
<li> mr. Freeman </li>
</ul>
</li>
<li>bla-bla
<ul>
<li> bla-bla, </li>
<li> bla-bla-bla, </li>
<li> mr. Freeman </li>
</ul>
</li>
<li>bla-bla
<ul>
<li> bla-bla, </li>
<li> bla-bla-bla, </li>
<li> mr. Freeman </li>
</ul>
</li>
</ol>
Раскраску сами добавите. Шестой осёл не поймёт, правда, но там дело поправляется маленьким скриптом.