Question

currently i have a hover box appearing whenever i mouse over “TITLE”, “FORMAT”.

html code:

<div id="sortmenusize">
    <ul id="sortmenu">
        <li>Refine By:</li>
         <li>TITLE
            <ul>
                <li><a href="alphasort.php?sort=A">A</a></li>
                <li><a href="alphasort.php?sort=B">B</a></li>
                <li><a href="alphasort.php?sort=C">C</a></li>
                    </ul>
         </li>
         <li>FORMAT
                    <ul>
                            <li>item 1</li>
                            <li>item 2</li>
         </li>
    </ul>
</div>

css:

#sortmenusize{
width:80%;
margin:0 auto;
}

#sortmenu{
    list-style-type: none;
}
#sortmenu > li:hover ul {
 display: inline;}

#sortmenu > li {
        float: left;
        padding-left:0;
        margin-left: -40px; 
        margin-right: 60px;
        font-family:"Georgia";
}
#sortmenu > li > ul {
        float:left;
        display: none;
        top:210px;
        left: 280px;
        position: absolute; border-style:solid; padding-left:10px; padding-right:10px;
        border-width:1px; background-color:white;list-style-type: none;
        }

#sortmenu > li > ul li {
  float:left;
    padding-top:10px;
    padding-bottom:10px;
  margin:0 10px; // Or whatever margin you want
}

I have a question, how do i always make this box appear right below “TITLE” and “FORMAT”?
This is because i am currently doing top:xxx px; and left: xxx px; which would change whenever i resize my internet browser.

EDIT 1:
i solved my problem using:

#sortmenu > li {position:relative;}

however, under “TITLE” it is appearing A – Z vertically. how can i make the A, B, C, D, E in horizontal row and F, G, H, I, J in another horizontal row so it should look like this when i hover over “TITLE”

A B C D E
F G H I J
K L M N O
P Q R S T
...
...
...     Z

Answer 1

if add a rule to make the sortmenu list items position relative, the absolute positioning of your hovers will be relative to the list item

#sortmenu > li {position:relative;}

a quick js fiddle example : http://jsfiddle.net/5vFpc/