Question

I have the code:

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

And I have this 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;
}

What I get is an action menu.
First I see only the LI “select option”.
On mouse over – it shows other options (post, edit, archive etc)

I have many such menus on the page.

I want to fix the position of .action elements so that they don’t influence the design of rest of the site (because right now when they become visible – other elements of the site move as well).

So I was trying to add something like:

.action {
    position:absolute;
}

But what happens is all the .action elements show up on top of each other – right after the first LI (.actionSelect).

So now I’m trying to make them show not on top of each other, but one after another, but with position absolute.
Is there any good way to do that?
(m.b. someting like top:+20px;)

Position: relative does not work – in this way when .action elements become visible – they will move all other elements.
Can’t use hard absolute positioning too (top:100px) as I have many of these lists on the page.

Answer 1

You want to position the ul absolutely, and then move the action select outside of the ul as the parent element. If you want to keep the select in a ul, you should have a nested ul for the options. Be sure to add position:relative to whatever is the parent of the options list.

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