JQuery CSS - floating menu bar

Question

Creating a widget that displays dynamically generated lists of items. Each item has [img] when clicked shows a hovering menu bar to delete, save, edit that item. I am stuck at how to use CSS to get this to hover to the bottom of the img without affecting the div that img is in? It's a scrollable window so the menu bar has to always be on top when item is close to the bottom within scroll area. Any advice is appreciated.

Please see jsFiddle Example to see it in action

My List Widget should float menu when [img] clicked for each list element:

<div class="scroll">
<ul class="ul1">
  <li>
    <div class="divtop">
        <a class="a1" href="javascript:void(0)">[img]</a>
         <ul class="float-menu">
             <li><a href="javascript:void(0)">X</a></li>
            <li><a href="javascript:void(0)">Y</a></li>
             <li><a href="javascript:void(0)">Z</a></li>
        </ul>          
        <div class="divsub">blah</div>
     </div>
</li>
 <li>
    <div class="divtop">
        <a class="a1" href="javascript:void(0)">[img]</a>
         <ul class="float-menu">
             <li><a href="javascript:void(0)">X</a></li>
            <li><a href="javascript:void(0)">Y</a></li>
             <li><a href="javascript:void(0)">Z</a></li>
        </ul>          
        <div class="divsub">blah</div>
    </div>
</li>

</ul>
</div>

//jquery code
/* by default float menu is hidden */
 $('.scroll ul li div ul').hide();

 $('.a1').click(function() {
      $('.a1').next('.float-menu').show();   
    });

  $('.a1').mouseout(function(){
   $('.a1').next('.float-menu').hide();
 });

//CSS

 div.scroll
 {
 background-color:lightgray;
 width:450px;
 height:120px;
 overflow-y:scroll;
 }

 .a1 {
float:left;  
 }

 .divtop {
  border:1px solid darkgray;
 }
 .divsub {
  margin-right:15px;
 }

 .ul1 {
 list-style-type:none;
  }

 .ul1 li {
  padding-bottom:15px;
 }
 .float-menu {
 list-style-type:none;
  width:15px;  
 }

 .float-menu li {
  padding:0px;   
   border: 1px solid pink;
 }

Answer 1

Heres a working fiddle with the outer <li> height change.

Working Fiddle

CSS Changes

.ul1 > li {
    height: 20px;
}

.float-menu {
    list-style-type:none;
    width:15px;
    background-color: white; /* just to show where the menu is */
    position: relative; /* displays over the top of other text */
    margin-left: 40px;  /* pushes the menu over, not sure if that is what you wanted*/
}

Script changes

/* by default float menu is hidden */
$('.scroll ul li div ul').hide();

$('.a1').click(function () {
    $(this).next('.float-menu').show();  // Use $(this) to get current clicked element
});

$('.a1').mouseout(function () {
    $(this).next('.float-menu').hide();   // Use $(this) to get mouseout  element
});

Answer 2

You question was a little confusing but I have a solution for you. Change your css so that:

.divtop {
    border:1px solid darkgray;
    position:relative;
}

This will allow you to position other elements absolutely which are relative to this div. If you don't do this they will be positioned relative to the browser window.

So if you have:

.float-menu {
    list-style-type:none;
    position:absolute;
    top: 20px;    
    left:-40px;
}

This will place your menu below the img link without it changing the div. You also might want to change your javascript so that it's toggled when the user clicks on the img.

$('.a1').click(function() {
   $(this).next('.float-menu').toggle();
});