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.像顶部一样：+ 20px;）
位置：相对不起作用 - 这样当.action元素变得可见时 - 它们将移动所有其他元素。也不能使用硬绝对定位（顶部：100px），因为我在页面上有很多这样的列表。

Answer 1

位置：绝对应该在.selectAnAction ul li ul我相信

查看此网站以获取下拉列表http://www.htmldog.com/articles/suckerfish/dropdowns/

Answer 2

您希望绝对定位ul，然后将ul外部的动作选择作为父元素移动。如果要将select保留在ul中，则应该为选项设置嵌套ul。一定要添加位置：相对于选项列表的父级。

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

CSS - 寻找使用position：absolute </li>显示<li>选项的好方法

2 个答案: