内联显示为非顶部或左侧固定位置

Question

目前，每当我将鼠标移到“标题”、“格式”上时，都会出现一个悬停框。

html代码：

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

我有一个问题，我如何总是使这个框出现在“标题”和“格式”的正下方？这是因为我目前正在做top:xxx px；和left: xxx px；，每当我调整我的互联网浏览器的大小时，它们都会改变。

编辑1:我使用以下工具解决了我的问题：

#sortmenu > li {position:relative;}

但是，在“标题”下面，它是从A到Z垂直显示的。如何使A，B，C，D，E在水平行，F，G，H，I，J在另一个水平行，这样当我将鼠标悬停在"TITLE“上时，它应该看起来像这样。

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

Answer 1

如果添加使排序菜单项处于相对位置的规则，则悬停的绝对位置将相对于列表项

#sortmenu > li {position:relative;}

一个快速的js小提琴示例：http://jsfiddle.net/5vFpc/

Answer 2

绝对定位的元素将相对于在其父层次结构中找到的第一个没有静态定位的元素进行定位。如果绝对定位的元素嵌套在相对定位的元素中。然后，它将相对于相对定位的元素显示，以便调整大小不会有问题。see here