Показване на редовете с елементите, които се движат наляво - html, css

Бих искал да имам кутия за навъртане над моя списък, така че да могат да показват азбуки един до друг. Пример за това е показан в това връзка, когато поставя курсора на мишката върху думата "заглавие", ще имам A, B, C и още един до друг.

Как мога да постигна това чрез коригиране на CSS?

Към настоящия момент успях да покажа само А, В, С във вертикален ред. CSS от сега:

#topbar{
width: 80%;
list-style-type: none;
}
#topbar > li:hover ul { display: inline;}

#topbar > li {
float: left;
margin-left: 20px;
margin-right: 20px;
font-family:"Georgia";
}
#topbar > li > ul {
float:left;
display: none;
top:32px;
position: absolute; border-style:solid; padding-left:10px; padding-right:10px;
border-width:1px; background-color:white;list-style-type: none;}
}

и моите ul и li кодове:

<ul id="topbar">
<li> <a href="#">Title</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
<li><a href="#">C</a></li>
<li><a href="#">D</a></li>
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li><a href="#">H</a></li>
,,,
</ul>
</li>
<li> <a href="#">Type</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</li>
<li> <a href="#">Format</a>
<ul>
<li><a href="#">A</a></li>
<li><a href="#">B</a></li>
</ul>
</li>
</ul>

Отговори:

За да получите плаващо ляво от списъка A - Z, добавете това правило:

#topbar > li > ul li {
float:left;
margin:0 5px; // Or whatever margin you want
}

http://jsfiddle.net/tcwsb/3/

В края на Вашия CSS код има допълнителна затваряща фигурна скоба, която може да създаде проблеми, ако се опитвате да добавите правила под последния

Това е CSS, от което се нуждаете:

#topbar { list-style:none; width: 80%; }
#topbar > li {
display:inline-block;
*display:inline;
position:relative;
}
#topbar > li > a { padding:1em 20px; }

#topbar li ul {
display:none;
position:absolute;
top:2em;
left:20px;
padding:5px;
background:white;
border:1px solid black;
}

#topbar li ul li {
display:inline-block;
*display:inline;
}

#topbar > li:hover ul { display:block }

Ето работната демонстрация: http://jsfiddle.net/rfn9S/