Mouse Leave animation being played when going down past 50% of object

Question

I'm new to Adobe Edge and I'm not really familiar with either CSS or javascript but I'm getting better. I've been trying to work on the navigational menu for my website for two weeks and the progress is very slow. I finally got the dropdown menu to happen correctly, except one thing. When I scroll down on the "AccomButton" and move the mouse past the 50% point of the object, the animation for the "up" occurs. I have it set to do this on "mouseleave". This seems to be the only instance in which the "up" animation is occuring wrongly. If I hover on any of the top 50% of the "AccomButton", it stays in the down or "stop" position.
Your help will be very much appreciated as my head hurts from banging it on the table the past two days!
Sorry, I forgot to add the code:
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes
   //Edge symbol: 'stage'
   (function(symbolName) {
      Symbol.bindElementAction(compId, symbolName, "${_Accommodations}", "mouseover", function(sym, e) {
         // insert code to be run when the mouse hovers over the object
         // play the timeline from the given position (ms or label)
         sym.play("drop");
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_Accommodations}", "mouseleave", function(sym, e) {
         // insert code to be run when the mouse leaves an element
         // stop the timeline at the given position (ms or label)
         sym.stop("stop");
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_HolstonButton}", "click", function(sym, e) {
         // insert code for mouse click here
         // Navigate to a new URL in the current window
         // (replace "_self" with appropriate target attribute for a new window)
         window.open("www.theriveroverlook.com/TheHolstonRoom", "_self");
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_TennesseeButton3}", "click", function(sym, e) {
         // Navigate to a new URL in the current window
         // (replace "_self" with appropriate target attribute for a new window)
         window.open("www.theriveroverlook.com/TheTennesseeRoom", "_self");
         // insert code for mouse click here
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_AccomDrop}", "mouseleave", function(sym, e) {
         // insert code to be run when the mouse leaves an element
         // play the timeline from the given position (ms or label)
         sym.play("up");
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_AccomDrop}", "mouseenter", function(sym, e) {
         // stop the timeline at the given position (ms or label)
         sym.stop("stop");
         // insert code to be run when the mouse enters an element
      //Edge binding end
   })("stage");
   //Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-379000071");

Answer 1

I'm new to Adobe Edge and I'm not really familiar with either CSS or javascript but I'm getting better. I've been trying to work on the navigational menu for my website for two weeks and the progress is very slow. I finally got the dropdown menu to happen correctly, except one thing. When I scroll down on the "AccomButton" and move the mouse past the 50% point of the object, the animation for the "up" occurs. I have it set to do this on "mouseleave". This seems to be the only instance in which the "up" animation is occuring wrongly. If I hover on any of the top 50% of the "AccomButton", it stays in the down or "stop" position.
Your help will be very much appreciated as my head hurts from banging it on the table the past two days!
Sorry, I forgot to add the code:
(function($, Edge, compId){
var Composition = Edge.Composition, Symbol = Edge.Symbol; // aliases for commonly used Edge classes
   //Edge symbol: 'stage'
   (function(symbolName) {
      Symbol.bindElementAction(compId, symbolName, "${_Accommodations}", "mouseover", function(sym, e) {
         // insert code to be run when the mouse hovers over the object
         // play the timeline from the given position (ms or label)
         sym.play("drop");
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_Accommodations}", "mouseleave", function(sym, e) {
         // insert code to be run when the mouse leaves an element
         // stop the timeline at the given position (ms or label)
         sym.stop("stop");
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_HolstonButton}", "click", function(sym, e) {
         // insert code for mouse click here
         // Navigate to a new URL in the current window
         // (replace "_self" with appropriate target attribute for a new window)
         window.open("www.theriveroverlook.com/TheHolstonRoom", "_self");
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_TennesseeButton3}", "click", function(sym, e) {
         // Navigate to a new URL in the current window
         // (replace "_self" with appropriate target attribute for a new window)
         window.open("www.theriveroverlook.com/TheTennesseeRoom", "_self");
         // insert code for mouse click here
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_AccomDrop}", "mouseleave", function(sym, e) {
         // insert code to be run when the mouse leaves an element
         // play the timeline from the given position (ms or label)
         sym.play("up");
      //Edge binding end
      Symbol.bindElementAction(compId, symbolName, "${_AccomDrop}", "mouseenter", function(sym, e) {
         // stop the timeline at the given position (ms or label)
         sym.stop("stop");
         // insert code to be run when the mouse enters an element
      //Edge binding end
   })("stage");
   //Edge symbol end:'stage'
})(jQuery, AdobeEdge, "EDGE-379000071");