Reduce the number of elements I hover The level 3 menu is broken in 2 parts if there are more than 10 items. The issue is with hovering over the newly created list.

At this moment I have 3 functions that apply the shown-sub class. I want to reduce it to only one. It should work when hovering over cotton and both ul lists.



 !function(){
 $("#nav ul.level0 ul.level1").each(function(){
  var menuLength = $(this).find("li.level2").length;
  if (menuLength &gt; 10){
   var detachedElements = $(this).find("li.level2").slice(10);
   detachedElements.detach();
   $(this).parent().append("&lt;ul class='level1 second-menu'&gt;&lt;/ul&gt;");
   detachedElements.appendTo($(this).siblings(".second-menu"));
  }
  $(this).siblings("a").hover(
   function(){
    $(this).siblings(".second-menu").addClass("shown-sub");
   }, 
   function(){
    $(this).siblings(".second-menu").removeClass("shown-sub");
   }
  );
  $(this).children(".level2").hover(
   function(){
    $(this).parent().siblings(".second-menu").addClass("shown-sub");
   }, 
   function(){
    $(this).parent().siblings(".second-menu").removeClass("shown-sub");
   }
  );
  $(this).siblings(".second-menu").children(".level2").hover(
   function(){
    $(this).parent().addClass("shown-sub");
   }, 
   function(){
    $(this).parent().removeClass("shown-sub");
   }
  );
 })
 }();
.second-menu{
  color:red;  
}
.shown-sub{
 color:blue;  
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"&gt;&lt;/script&gt;
&lt;ul id="nav"&gt;
    &lt;li class="level0 nav-2 active level-top parent"&gt;
      &lt;a class="level-top" href="http://higgs.limebuild.net/fabrics.html"&gt;
        &lt;span&gt;link text&lt;/span&gt;
      &lt;/a&gt;
      &lt;ul class="level0"&gt;
        &lt;li class="level1 nav-2-1 first active parent"&gt;
          &lt;a class="" href="http://higgs.limebuild.net/fabrics/cotton.html"&gt;
            &lt;span&gt;Cotton&lt;/span&gt;
          &lt;/a&gt;
          &lt;ul class="level1"&gt;
            &lt;li class="level2 nav-2-1-1 first"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-2"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-3"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-4"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-5"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-6"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-7"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-8"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-9"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-10"&gt;has to be black&lt;/li&gt;
            &lt;li class="level2 nav-2-1-11"&gt;has to be blue on hover&lt;/li&gt;
            &lt;li class="level2 nav-2-1-12"&gt;has to be blue on hover&lt;/li&gt;
            &lt;li class="level2 nav-2-1-13"&gt;has to be blue on hover&lt;/li&gt;
            &lt;li class="level2 nav-2-1-14"&gt;has to be blue on hover&lt;/li&gt;
            &lt;li class="level2 nav-2-1-15"&gt;has to be blue on hover&lt;/li&gt;
            &lt;li class="level2 nav-2-1-16"&gt;has to be blue on hover&lt;/li&gt;
            &lt;li class="level2 nav-2-1-17"&gt;has to be blue on hover&lt;/li&gt;
            &lt;li class="level2 nav-2-1-18"&gt;has to be blue on hover&lt;/li&gt;
            &lt;li class="level2 nav-2-1-19"&gt;has to be blue on hover&lt;/li&gt;
            &lt;li class="level2 nav-2-1-20 last"&gt;has to be blue on hover&lt;/li&gt;
           &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;
Particularly with your example, I'm not sure if is the kind of functionality what you want, but you can use pure html + css for get a similar approach, using :hover selector. 

http://jsfiddle.net/4cywb3yg/4/

If doesn't work for you, and want to keep your code, I refactored a couple of things.

I think you are add/remove the same class. I extracted in a generic function, and apply independently to each element.

    function setToggles($mainElement, $subElement) {

    var hoverIn = function () {
       $subElement.addClass("shown-sub");
    };

    var hoverOut = function () {
       $subElement.removeClass("shown-sub");
    };       

    $mainElement.hover(hoverIn,hoverOut);
}


Also I extract a couple of variables with the convention $variable for jQuery elements.

Particularly in this example you are using a lot of jQuery selectors,that can be re-use extracting in a variables. (that was the way what i found the extract code)

Also you chain a lot of jQuery calls, Is not bad, but in excess is easy lose who is receive the last message.And can be a mess for human-reading.

http://jsfiddle.net/4cywb3yg/3/