treehouse : what would you like to learn today?
Web Design Web Development iOS Development

[Solved] Superfish Dropdown submenu not displaying

  • I am strugglging with superfish dropdown menu, It is just showing arrow, when hover on it , doesn't show submenu under it , neither in IE(7to 9) nor FF. I have goggled and tried to change call of the function with many parameter. here is my code

    <link rel="stylesheet" type="text/css" href="assets/superfish.css" media="screen">
      <script type="text/javascript" src="assets/js/hoverIntent.js"></script>
    
      <script type="text/javascript" src="assets/js/superfish.js"></script>
      <script type="text/javascript">
    
          // initialise plugins
         jQuery(function () {
            jQuery('ul.sf-menu').superfish();
         });
          </script>
    

    <

    div class="mainmenu clearfix">

    <

    ul class="sf-menu sf-js-enabled">

    Yrkesmesse 2012 »

    <

    ul style="display: none; visibility: hidden;">

    .......so on

    Could somebody please help me !!

  • It would be easier if you provided us with a link.

  • Have you checked the console for any JavaScript errors? jQuery.browser is removed from version 1.9, try using an older jQuery version

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

  • @CrocoDillon :and it worked!!! thank you very much!!! :) you saved my lot of time.... I used which was culprit there.... I replace it with

    <

    script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> Thank you :)

  • No sorry it is not working it was my mistake, I changed the version of jquery.min.js and it worked because i commented superfish call
    for example

    // initialise plugins // jQuery(function () { // jQuery('ul.sf-menu').superfish(); // });

    I dont know even if it is commented how does this work?

  • I don't know superfish but it seems it's adding visibility: hidden; to the sub menus, and doesn't remove it. Go to superfish.js line 105 and remove this part: .css('visibility','hidden'), see if that works.

  • Solved 1) Using the above trick

    <

    script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> in addition to this 2)the fuction called twice .. , so updated it into only once call of plugin Thank you :)