JS .hover visibility doesn't work (ASP.NET, VS2013, web forms)

Question

I currently am learning to make ASP.NET app by using VS2013, following the step by step learning from these video series:

https://www.youtube.com/watch?v=aUx2Bdx68f4

The video is shown using VS2010

In its masterpage, it uses the following java script to display the sub-menu box when the mouse is hovering over a tab item:

  <script type="text/javascript" src="../JavaScript/jquery-1.11.3.min.js"></script>
  <script type="text/javascript">
    function mainmenu() {
      $("#nav ul").css({ display: "none" }); //Opera fix
      $("#nav li").hover(function () {
        $(this).find('ul:first').css({ visibility: "visible", display: "none" }).show(400);
      }, function () {
        $(this).find('ul:first').css({ visibility: "hidden" });
      });
    }

    $(document).ready(function () {
      mainmenu();
    });
  </script>

The display is like the following, a sub-menu box is displayed when the mouse is hovering over the "Management" tab item. Example below is showing how it is when I am in the ~/Pages/About page:

So far it has no problem, but when I started to create webforms in the sub-folder in my "Pages" folder of the solution called "Account" folder (shown in the image below):

Then the mouse-hovering to show the sub-menu box is no longer working, but only on the pages in my "Account" subfolder. Example below is when I am in my ~/Pages/Account/Login page:

I use the same masterpage for both the ~/Pages/About and ~/Pages/Account/Login pages, and in the video (using VS2010), it works fine. But it doesn't work in my app. Anyone can kindly explain why it is so?

Answer 1

Thanks to Mr. Suprabhat Biswal, I get this answer from him (please refer to the chat).

The problem was because in my javascript in the masterpage, I put

<script type="text/javascript" src="../JavaScript/jquery-1.11.3.min.js"></script>

instead of

<script type="text/javascript" src="<%=GetBaseURL%>/JavaScript/jquery-1.11.3.min.js"></script>

the first one makes the jquery executed always relative to the path of my current page. In my case, that makes the jquery referred when opening Login page to be in the localhost:64631/Pages/JavaScript/jquery-1.11.3.min.js (wrong) instead of localhost:64631/JavaScript/jquery-1.11.3.min.js (correct)

To solve it, he suggested me to add a key called BaseURL in my web.config and to create C# method named GetBaseURL which returns they key value to be used in the java script (the second script). Now it works perfectly fine! :)