Trying to get my parent menu buttons not to scroll

Greetings, Firstly I will apologize I am very new to JavaScript and struggle with it a lot. Being a self published author I code my own website. On my site I have a character page (characters are drawn). They are added to a big scrollable vertical menu categorized by the book they appear in (it’s a series). Anyhow I will be soon starting a new spin off series and don’t want the new characters to appear under the original series menu. To remedy this I have made the large character menu a sub menu each scrollable menu working independent of the other. All this works. My parent buttons properly call the character menus and they scroll as they should. My only issue is that the primary series name buttons scroll with the character menu. I want the primary series name buttons to remain fixed. I am pretty sure it is either that I am placing the scroll buttons in the wrong place in correlation to the parent buttons or my other thing I’ve been trying is in the scrollable JavaScript code to say anything with the class name “parent” scroll false. again I could be declaring it all wrong too. Anyways, if someone wouldn’t mind skimming over my code to help me best declare for my primary buttons not to scroll I’d really appreciate. it. I will apologize as I have included the code for my whole webpage. Though I have entered stand in list entries it is still quite long. Thanks a billion!

<!DOCTYPE html>
<html><head>
<title>Characters</title>
<!--this group of linked css/javascript is for the sliding red underline for your main nav-->
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script>
    <script src='js/jquery.color-RGBa-patch.js'></script>
    <script src='js/example.js'></script>
    <!--the below links to the css that defines the "empty shell" looks and appearance-->
    <link rel="stylesheet" type="text/css" href="css/CharacterPageStyle.css"  />
    <!--these scripts (the ones that are linked below all control the character menu-->    
 	<script type="text/javascript" src="js/NewCharacterMenu.js"></script>
  	<script type="text/javascript" src="js/OldMenuBehaviour.js"></script>
  	<link rel="stylesheet" type="text/css" href="css/CharacterMenu.css"  />
    <!--Sub menu scripts-->
    <link rel="stylesheet" type="text/css" href="css/result-light.css">
    <script type="text/javascript" src="js/jquery-2.js"></script>
  <!-- Script for scroll -->
  <script type="text/javascript">//<![CDATA[

    $(window).load(function(){
      
var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $("#content").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
	$(".parent").scrolling = false;//my attempt to prevent parents scrolling
    scrolling = true;
    scrollContent("up");
	

}).bind("mouseout", function(event) {
    scrolling = false;
});


$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
	$(".parent").scrolling = false;
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});

function scrollContent(direction) {
    var amount = (direction === "up" ? "-=3px" : "+=3px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}

    });
  //]]>	</script>
    <script type="text/javascript">

    $(function(){
      
$(function () {
    $(".imageMenu").hide();
    $(".parent").click(function (e) {
        e.preventDefault();
        if (!$(e.target).closest("ul").is(".imageMenu")) {
            $(".imageMenu", this).toggle();
        }
    });
});

    });

  //]]></script>

</head>
<body>
<!--this is the header dragon eye banner image nested inside a div called HeaderBanner which the css is defined for-->
<div id="HeaderBanner"><img src="images/header.jpg" width="100%"/></div>

<!--this is the top navigation: the nav-wrap div is styled to span the entire page width-->
<div class="nav-wrap">
<ul class="group" id="example-one">
    <li><a href="index.html">Home</a></li>
    <li><a href="author.html">Author</a></li>
    <li><a href="books.html">Books</a></li>
    <li class="current_page_item"><a href="characters.html">Characters</a></li>
   <li><a href="http://www.theamityblade.com/forum/">Forums</a></li>
    <li><a href="contact.php">Contact</a></li>
    
 </ul>
</div>
  
  
</div>
<div id="MainContent">
<div id="LeftContent">
<div id="wrapper">
<div align="left"><a class="NavButtons" id="scrollUp" href="#"><img src="images/CharacterUpArrow.gif" width="20%"/></a>
<div id="content">
        <ul>
        <li class="parent"> <a href="">First Series Name</a>
       <ul id="menu" class='imageMenu'>
<!--obviously this is the character menu-->
 <li><font size="+2">Book One</font></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series1Book1FirstExample.jpg')">First Example</a></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series1Book1SecondExample.jpg')">Second Example</a></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series1Book1Third Example.jpg')">Third Example</a></li>
<li><font size="+2">Book Two</font></li>
<li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series1Book2FirstExample.jpg')">First Example</a></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series1Book2SecondExample.jpg')">Second Example</a></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series1Book2Third Example.jpg')">Third Example</a></li>
    </ul>
         </li>
        <li class="parent"> <a href="">Second Series</a>
        <ul id="menu" class='imageMenu'>
<!--obviously this is the character menu-->
  <li><font size="+2">Book One</font></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series2Book1FirstExample.jpg')">First Example</a></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series2Book1SecondExample.jpg')">Second Example</a></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series2Book1Third Example.jpg')">Third Example</a></li>
<li><font size="+2">Book Two</font></li>
<li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series2Book2FirstExample.jpg')">First Example</a></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series2Book2SecondExample.jpg')">Second Example</a></li>
    <li class='CharacterButton'><a href="javascript:;" onClick="change_pic('images/characters/Series2Book2Third Example.jpg')">Third Example</a></li>
    </ul>
    </li>
    </ul>
    </div>

  <a class="NavButtons" id="scrollDown" href="#"><img src="images/CharacterDownArrow.gif" width="20%"/></a>
  </div>
  </div>
  </div>
  <div id="RightContent">
<div id="gallery">
   <img name="_pimg" src="images/characters/empty.gif" >
  </div>
</div>
  </div>
  
<!--this script says, when click on the character button to load that character into the gallery div-->
<script type="text/javascript">
function change_pic(p) {
img = new Image();
img.src = p;
img.onload = function() {document.images._pimg.src = img.src};
}
 </script>
 <!--This is for character menu behaviour-->
  <script>
    // tell the embed parent frame the height of the content
    if (window.parent && window.parent.parent){
      window.parent.parent.postMessage(["resultsFrame", {
        height: document.body.getBoundingClientRect().height,
        slug: "s5mgX"
      }], "*")
    }

    // always overwrite window.name, in case users try to set it manually
    window.name = "result"
  </script>


</body></html>

RandellDawson, thank you for replying. I think I tried to combine the script into a single script once and the code ceased to function. As I said I am a beginner and I know my code is sloppy but it still functions. Seeing as how I struggle with code working is always good enough for me. I do really apologize if you couldn’t make sense of it. When I script I will add one element at a time. I will link any js and css necessary for the element to work and if (I usually follow tutorials etc to script) the reference inserted a javascript function right into the head or bottom of body tag I figure those who made the tutorial must have had a reason for it so I too insert it in the same spot to, hopefully, increase my chances of it working. Just to put it in perspective, it took about four days to get the menu to scroll on hover. Trying to fix the parent buttons has been something I have been fighting to make work for upwards of a week for maybe about four hours a day. This is why I came here for help I have grown rather weary of trying to make my code just function that’s all I ask of it. Evidently that is too much to request for noob me. Again thank you again for your advice and perhaps way in the future if I have nothing better to do I will get brave and try to clean up the code… until then it is staying.

Thanks again RandellDawson for continuing to support. I will shamefully admit that I tried to get the files on GitHub. I created a repository but, despite my extensive searching for upwards of the last hour I couldn’t for the life of me figure out how to share it. If your willing to accept it I bundled all the CSS and JavaScript files associated with that HTML in a zip folder hosted on MediaFire (I had an account there anyways). I’m sorry it isn’t as convenient for you oh wise ones out there in internet land. Hopefully it will suffice. You should be able to grab it here; Download My Files Again thanks for all the help you have and continue to provide.I should mention none of the site graphics are included to help with file size. Again sorry and thanks.

Okay then, in that case, hopefully this is the right link.GitHub file (I hope) Man that is one confusing site. Thanks again for you help and patience.

Firstly thank you for replying and I will apologize for my extremely delayed response. I have been having a lot of difficulty logging in. I must have a bad computer ip or something though I will look into it when I can. In the mean time I will contribute to this forum as often as I am able. Anyhow as humiliating as it is I will show you a working example which is on my server (I am just a private person I hate people knowing anything about me.) anyways here is the test page from my website and a working example. I will apologize as I have not styled the parent buttons yet so they are a bit hard to spot. As for the code, I have stripped it down to the bare minimum, just enough to make the problem function. Just update the link to the jquery to watch a simplified version in action (only the necessary code is in this page). Again thank you for your patience. Whenever the computer allows me to log in I will keep posting. Anyways here’s a simplified version of only the fundamental code contributing to the problem.:

<html>
<head>
<title>Example</title>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
    // Script for scroll 
 $(window).load(function(){
var step = 25;
var scrolling = false;
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
	$(".parent").scrolling = false;
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    scrolling = false;
});
$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
	$(".parent").scrolling = false;
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});
function scrollContent(direction) {
    var amount = (direction === "up" ? "-=3px" : "+=3px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}

    });  
  //script for sub menu show and hide
    $(function(){
$(function () {
    $(".MenuFunctions").hide();
    $(".parent").click(function (e) {
        e.preventDefault();
        if (!$(e.target).closest("ul").is(".MenuFunctions")) {
            $(".MenuFunctions", this).toggle();
        }
    });
});

    });

  //]]>
  </script>
<style>
#content {
	height:400px;
	width: 250px;
	overflow:hidden;
	position:relative;
	scrolling:no;
}

</style>
</head>
<body>
<div id="LeftContent">
  <div id="wrapper">
    <div align="left"><a class="NavButtons" id="scrollUp" href="#">Scroll Up</a>
      <div id="content">
        <ul>
          <li class="parent"> <a href="#">Category One</a>
            <ul class='MenuFunctions'>
              <li class='MenuButton'><a href="#">Item1</a></li>
              <li class='MenuButton'><a href="#">Item2</a></li>
              <li class='MenuButton'><a href="#">Item3</a></li>
              <li class='MenuButton'><a href="#">Item4</a></li>
              <li class='MenuButton'><a href="#">Item5</a></li>
              <li class='MenuButton'><a href="#">Item6</a></li>
              <li class='MenuButton'><a href="#">Item7</a></li>
              <li class='MenuButton'><a href="#">Item8</a></li>
              <li class='MenuButton'><a href="#">Item9</a></li>
              <li class='MenuButton'><a href="#">Item10</a></li>
              <li class='MenuButton'><a href="#">Item11</a></li>
              <li class='MenuButton'><a href="#">Item12</a></li>
              <li class='MenuButton'><a href="#">Item13</a></li>
              <li class='MenuButton'><a href="#">Item14</a></li>
              <li class='MenuButton'><a href="#">Item15</a></li>
              <li class='MenuButton'><a href="#">Item16</a></li>
              <li class='MenuButton'><a href="#">Item17</a></li>
              <li class='MenuButton'><a href="#">Item18</a></li>
              <li class='MenuButton'><a href="#">Item19</a></li>
              <li class='MenuButton'><a href="#">Item20</a></li>
              <li class='MenuButton'><a href="#">Item21</a></li>
              <li class='MenuButton'><a href="#">Item22</a></li>
              <li class='MenuButton'><a href="#">Item23</a></li>
              <li class='MenuButton'><a href="#">Item24</a></li>
              <li class='MenuButton'><a href="#">Item25</a></li>
              <li class='MenuButton'><a href="#">Item26</a></li>
              <li class='MenuButton'><a href="#">Item27</a></li>
              <li class='MenuButton'><a href="#">Item28</a></li>
              <li class='MenuButton'><a href="#">Item29</a></li>
              <li class='MenuButton'><a href="#">Item30</a></li>
              <li class='MenuButton'><a href="#">Item31</a></li>
              <li class='MenuButton'><a href="#">Item32</a></li>
              <li class='MenuButton'><a href="#">Item33</a></li>
              <li class='MenuButton'><a href="#">Item34</a></li>
              <li class='MenuButton'><a href="#">Item35</a></li>
              <li class='MenuButton'><a href="#">Item36</a></li>
              <li class='MenuButton'><a href="#">Item37</a></li>
              <li class='MenuButton'><a href="#">Item38</a></li>
              <li class='MenuButton'><a href="#">Item39</a></li>
              <li class='MenuButton'><a href="#">Item40</a></li>
              <li class='MenuButton'><a href="#">Item41</a></li>
              <li class='MenuButton'><a href="#">Item42</a></li>
              <li class='MenuButton'><a href="#">Item43</a></li>
              <li class='MenuButton'><a href="#">Item44</a></li>
              <li class='MenuButton'><a href="#">Item45</a></li>
              <li class='MenuButton'><a href="#">Item46</a></li>
              <li class='MenuButton'><a href="#">Item47</a></li>
              <li class='MenuButton'><a href="#">Item48</a></li>
              <li class='MenuButton'><a href="#">Item49</a></li>
              <li class='MenuButton'><a href="#">Item50</a></li>
            </ul>
          </li>
          <li class="parent"> <a href="#">Category Two</a>
            <ul class='MenuFunctions'>
              <li class='MenuButton'><a href="#">Item1</a></li>
              <li class='MenuButton'><a href="#">Item2</a></li>
              <li class='MenuButton'><a href="#">Item3</a></li>
              <li class='MenuButton'><a href="#">Item4</a></li>
              <li class='MenuButton'><a href="#">Item5</a></li>
              <li class='MenuButton'><a href="#">Item6</a></li>
              <li class='MenuButton'><a href="#">Item7</a></li>
              <li class='MenuButton'><a href="#">Item8</a></li>
              <li class='MenuButton'><a href="#">Item9</a></li>
              <li class='MenuButton'><a href="#">Item10</a></li>
              <li class='MenuButton'><a href="#">Item11</a></li>
              <li class='MenuButton'><a href="#">Item12</a></li>
              <li class='MenuButton'><a href="#">Item13</a></li>
              <li class='MenuButton'><a href="#">Item14</a></li>
              <li class='MenuButton'><a href="#">Item15</a></li>
              <li class='MenuButton'><a href="#">Item16</a></li>
              <li class='MenuButton'><a href="#">Item17</a></li>
              <li class='MenuButton'><a href="#">Item18</a></li>
              <li class='MenuButton'><a href="#">Item19</a></li>
              <li class='MenuButton'><a href="#">Item20</a></li>
              <li class='MenuButton'><a href="#">Item21</a></li>
              <li class='MenuButton'><a href="#">Item22</a></li>
              <li class='MenuButton'><a href="#">Item23</a></li>
              <li class='MenuButton'><a href="#">Item24</a></li>
              <li class='MenuButton'><a href="#">Item25</a></li>
              <li class='MenuButton'><a href="#">Item26</a></li>
              <li class='MenuButton'><a href="#">Item27</a></li>
              <li class='MenuButton'><a href="#">Item28</a></li>
              <li class='MenuButton'><a href="#">Item29</a></li>
              <li class='MenuButton'><a href="#">Item30</a></li>
              <li class='MenuButton'><a href="#">Item31</a></li>
              <li class='MenuButton'><a href="#">Item32</a></li>
              <li class='MenuButton'><a href="#">Item33</a></li>
              <li class='MenuButton'><a href="#">Item34</a></li>
              <li class='MenuButton'><a href="#">Item35</a></li>
              <li class='MenuButton'><a href="#">Item36</a></li>
              <li class='MenuButton'><a href="#">Item37</a></li>
              <li class='MenuButton'><a href="#">Item38</a></li>
              <li class='MenuButton'><a href="#">Item39</a></li>
              <li class='MenuButton'><a href="#">Item40</a></li>
              <li class='MenuButton'><a href="#">Item41</a></li>
              <li class='MenuButton'><a href="#">Item42</a></li>
              <li class='MenuButton'><a href="#">Item43</a></li>
              <li class='MenuButton'><a href="#">Item44</a></li>
              <li class='MenuButton'><a href="#">Item45</a></li>
              <li class='MenuButton'><a href="#">Item46</a></li>
              <li class='MenuButton'><a href="#">Item47</a></li>
              <li class='MenuButton'><a href="#">Item48</a></li>
              <li class='MenuButton'><a href="#">Item49</a></li>
              <li class='MenuButton'><a href="#">Item50</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <a class="NavButtons" id="scrollDown" href="#">Scroll Down</a> </div>
  </div>
</div>
</div>
</body>
</html>