$("#m-1").hover(
        function() {
        $("#sub-1").addClass("visible");
        },
        function() {
        $("#sub-1").removeClass("visible");
        }
      );
      $("#sub-1").hover(
        function() {
        $("#sub-1").addClass("visible");
        },
        function() {
        $("#sub-1").removeClass("visible");
        }
       );
       
      $("#m-2").hover(
        function() {
        $("#sub-2").addClass("visible");
        },
        function() {
        $("#sub-2").removeClass("visible");
        }
      );
      $("#sub-2").hover(
        function() {
        $("#sub-2").addClass("visible");
        },
        function() {
        $("#sub-2").removeClass("visible");
        }
       );
       
      $("#m-3").hover(
        function() {
        $("#sub-3").addClass("visible");
        },
        function() {
        $("#sub-3").removeClass("visible");
        }
      );    
      $("#sub-3").hover(
        function() {
        $("#sub-3").addClass("visible");
        },
        function() {
        $("#sub-3").removeClass("visible");
        }
       );
       
      $("#m-4").hover(
        function() {
        $("#sub-4").addClass("visible");
        },
        function() {
        $("#sub-4").removeClass("visible");
        }
      );    
      $("#sub-4").hover(
        function() {
        $("#sub-4").addClass("visible");
        },
        function() {
        $("#sub-4").removeClass("visible");
        }
       );
       
       $("#m-5").hover(
        function() {
        $("#sub-5").addClass("visible");
        },
        function() {
        $("#sub-5").removeClass("visible");
        }
      );    
      $("#sub-5").hover(
        function() {
        $("#sub-5").addClass("visible");
        },
        function() {
        $("#sub-5").removeClass("visible");
        }
       );
       
       $("#m-6").hover(
        function() {
        $("#sub-6").addClass("visible");
        },
        function() {
        $("#sub-6").removeClass("visible");
        }
      );    
      $("#sub-6").hover(
        function() {
        $("#sub-6").addClass("visible");
        },
        function() {
        $("#sub-6").removeClass("visible");
        }
       );
       
       $("#m-7").hover(
        function() {
        $("#sub-7").addClass("visible");
        },
        function() {
        $("#sub-7").removeClass("visible");
        }
      );    
      $("#sub-7").hover(
        function() {
        $("#sub-7").addClass("visible");
        },
        function() {
        $("#sub-7").removeClass("visible");
        }
       );
       
       $("#m-8").hover(
        function() {
        $("#sub-8").addClass("visible");
        },
        function() {
        $("#sub-8").removeClass("visible");
        }
      );    
      $("#sub-8").hover(
        function() {
        $("#sub-8").addClass("visible");
        },
        function() {
        $("#sub-8").removeClass("visible");
        }
       );
       
       $("#m-9").hover(
        function() {
        $("#sub-9").addClass("visible");
        },
        function() {
        $("#sub-9").removeClass("visible");
        }
      );    
      $("#sub-9").hover(
        function() {
        $("#sub-9").addClass("visible");
        },
        function() {
        $("#sub-9").removeClass("visible");
        }
       );