html - CSS - 寻找一种显示位置为 :absolute 的 选项的好方法

Question

我有代码:

<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) 之后。
所以现在我试图让它们不在彼此之上显示，而是一个接一个地显示，但位置是绝对的。有什么好办法吗？(m.b. 有点像 top:+20px;)
Position: relative 不起作用 - 这样当 .action 元素变得可见时 - 它们将移动所有其他元素。也不能使用硬绝对定位 (top:100px)，因为我在页面上有很多这样的列表。

Answer 1

你想绝对定位ul，然后将 Action select移到ul之外作为父元素。如果要将选择保留在 ul 中，则应该为选项设置一个嵌套的 ul。请务必将 position:relative 添加到选项列表的父级。

<div class='selectAnAction'>
   <ul>
     <li class='actionSelect'>
         <span>Select an Action</span></li>
         <ul class="optionMenu">
            <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>
     </li>
   </ul>
</div>