Question

目前，只要我鼠标悬停在“TITLE”，“FORMAT”上，我就会出现一个悬停框。

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
}

我有一个问题，我怎么总是让这个框出现在“TITLE”和“FORMAT”的正下方？这是因为我目前做的很好：xxx px;并离开：xxx px;每当我调整我的互联网浏览器时，这都会改变。

编辑1：我用以下方法解决了我的问题：

#sortmenu > li {position:relative;}

然而，在“TITLE”下，它垂直出现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列表项位置相对，则悬停的绝对定位将相对于列表项

#sortmenu > li {position:relative;}

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

Answer 2

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

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

2 个答案: