Question

I would like to have a hover box over my list so that they can display alphabets side by side.
An example is shown in this link, whenever I put my mouse cursor over the word “title”, I would have A, B, C and more side by side.

How can i achieve this by adjusting the css?

As of now, I have only been able to shown the A, B, C in vertical order. CSS as of now:

#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;}     
}

and my ul and li codes:

<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>

Answer 1

To get the A – Z list floating left just add this rule:

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

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

There’s an extra closing curly bracket at the end of your CSS code which might be causing problems if you’re trying to add any rules underneath that last one