jquerymenuhtml-selectprepend

Options from SELECT menu is hiding


I am trying to 'prependTo' "SELECT menu" to DIVs. Menu is 'prependingTo' on 'mouseover' over DIVs. In this menu is the SELECT with some options. But when I want choose some other option, options from SELECT menu is hidding. It does not work. Why ?

Example

HTML:

 <div id="add" style='width:200px; background:cyan;'> + + + + + + + + + </div>
 <div id="menu">
     <div style="display:inline-block;">
         <button>1</button>
         <button>2</button>
     </div>
     <div style="display:inline-block;">
         <select id="fs">
            <option value="Arial">Arial</option>
            <option value="Verdana ">Verdana </option>
            <option value="Impact ">Impact </option>
            <option value="Comic Sans MS">Comic Sans MS</option>
         </select>
     </div>

 </div>
 <br>
 <div id="cont">
    <div id="container">
       <div id="divA">1111<br><br>&nbsp;</div>
       <br>
       <div id="divB">2222<br><br>&nbsp;</div>
       <br>
       <div id="divC">33333<br><br>&nbsp;</div>
       <br>
       <div id="divD"><br>&nbsp;</div>
    </div>
 </div>

CSS:

  #container{ padding: 100px;  }
  #menu{  font-size: 10px;  
       position: absolute;
       background-color: none;
       letter-spacing: 0px;
  }
  #divA{ background-color: yellow; }
  #divB{ background-color: red;  }
  .divB{ background-color: red; }
  #divC{ background-color: cyan; }
  #divD{ background-color: brown; }

jQuery:

  $("#add").live("click", function() {
     var timestamp = Date.now();
     $("#container").prepend('<div class="divB" id="'+timestamp+'">'+timestamp+'<br><br></div>');
  });
  $("#container div").live({
     mouseover: function() {
        if( $(this).closest("#menu").length ){ return; }
        $('#menu').prependTo($(this));
     }
  });

Solution

  • Try like this

    $("#container").bind({
        mouseover: function() {
            if( $(this).closest("#menu").length ){ 
                return; 
            }
            $('#menu').prependTo(this);
            $("#container").unbind('mouseover');       
        }
    });