我有代码：
<div class='selectAnAction'>
<ul>
<li class='actionSelect'><span>Select an Action</span></li>
<li class='action' onclick='location.href=\"/post.php?key=".$row['hash']."\";'>post</li>
<li class='action' onclick='location.href=\"/adpreview.php?key=".$row['hash']."\";'>preview</li>
<li class='action' onclick='location.href=\"/adupdate.php?key=".$row['hash']."\";'>edit</li>
<li class='action' onclick='location.href=\"/addelete.php?key=".$row['hash']."\";'>archive</li>
</ul>
</div>
我有这个CSS：
.selectAnAction ul {
display: block;
background-image: url("/images/selectAnAction-dropdown.png");
background-position: 0px -200px;
background-repeat: repeat-x;
border: 1px solid #FFFFFF;
box-shadow: 0px 0px 3px #CCCCCC;
font-size: 0.75em;
list-style: none outside none;
margin: 0px;
overflow: hidden;
padding: 0px;
text-indent: 0px;
width: 120px;
color:white;
}
ul {
display: block;
}
.selectAnAction ul li.actionSelect {
background: url("/images/selectAnAction-bg.png") repeat-x transparent;
font-weight: bold;
}
.selectAnAction ul li:first-child {
display: block;
}
.selectAnAction ul li {
display: none;
margin: 0px;
text-indent: 0px;
width: 120px;
background-color:grey;
}
.selectAnAction:hover ul li{
display: block;
margin: 0px;
text-indent: 0px;
width: 120px;
}
.selectAnAction ul {
font-size: 0.75em;
list-style: none outside none;
}
.selectAnAction ul li {
display: none;
margin: 0px;
text-indent: 0px;
width: 100%;
padding-left:10px;
font-family:"Times New Roman",Georgia,Serif;
font-size:1.3em;
text-align:left;
}
.action:hover {
background-color:black;
cursor:pointer;
}
我得到的是一个动作菜单。首先，我只看到 LI“选择选项”。鼠标悬停 - 它显示其他选项（发布、编辑、存档等）
我在页面上有很多这样的菜单。
我想修复 .action 元素的位置，这样它们就不会影响网站其余部分的设计（因为现在当它们变得可见时 - 网站的其他元素也会移动）。
所以我试图添加类似的东西：
.action {
position:absolute;
}
但是发生的情况是所有 .action 元素都显示在彼此之上 - 就在第一个 LI (.actionSelect) 之后。
所以现在我试图让它们不是一个接一个地显示，而是一个接一个地显示，但位置是绝对的。有什么好办法吗？(mb someting like top:+20px;)
Position: relative 不起作用 - 这样，当 .action 元素变得可见时 - 它们将移动所有其他元素。也不能使用硬绝对定位（顶部：100px），因为我在页面上有很多这样的列表。