sub-menu appear twice on hover!

[mehdi.nk]

Hi, 

I had a bit change on main menu, now sub-menu appear twice when mouse moving to other menu item!

you can see it here: http://www.nikroyal.com.au

 

anyone can help me?!

 

[sandipchandela]

Remove/ Commented out (Like i did ) following position:relative from superfish css file

 

http://www.nikroyal.com.au/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ 
 /*position: relative;*/
  }

do clear cache or remove cache/smarty folder.

happy prestas

[mehdi.nk]

 

Remove/ Commented out (Like i did ) following position:relative from superfish css file

 

http://www.nikroyal.com.au/themes/default-bootstrap/css/modules/blocktopmenu/css/superfish-modified.css

 

.sf-menu li:hover {
  visibility: inherit;
  /* fixes IE7 'sticky bug' */ 
 /*position: relative;*/
  }

do clear cache or remove cache/smarty folder.

happy prestas

 

Thank you very much.

it's fix, but now all the Sub-menu appear from left! and not dependent to active menu button. 

could you help to to fix this as well?

[sandipchandela]

add margin-left 

.sf-menu > li > ul {
    padding: 26px 30px 31px;
    width: 300px;
    /* position: relative; */
    margin-left: 60px; 
}

[mehdi.nk]

 

add margin-left 

.sf-menu > li > ul {
    padding: 26px 30px 31px;
    width: 300px;
    /* position: relative; */
    margin-left: 60px; 
}

now have new trouble, have look

Edited August 25, 2016 by mehdi.nk (see edit history)

[sandipchandela]

 

.sf-menu > li > ul {
    padding: 26px 30px 31px;
    width: 300px;
    /* position: relative; */
    margin-left: 60px; //add this
}

.sf-menu > li > ul {
    padding: 26px 30px 31px;
    width: 300px;
    /* position: relative; */
   /*margin-left: 60px; */  //remove this
}

[mehdi.nk]

 

 

.sf-menu > li > ul {
    padding: 26px 30px 31px;
    width: 300px;
    /* position: relative; */
    margin-left: 60px; //add this
}

.sf-menu > li > ul {
    padding: 26px 30px 31px;
    width: 300px;
    /* position: relative; */
   /*margin-left: 60px; */  //remove this
}

So, How can I fix sub-menu position? I need to be appear on active menu button.

[sandipchandela]

do the following

.sf-menu > li > ul {
    padding: 26px 30px 31px;
    width: 300px;
    position: relative;  // add this
}

.sf-menu li ul {
    display: none;
    left: 0;
    top: 4px;  /// change 42px to 4 px
    z-index: 99;

}

.sf-menu > li {
    float: left;
    border-right: 1px solid #d6d4d4;
    margin-bottom: -3px;
    width: 116px;  //add this
    height: 35px;  // add this
}

[mehdi.nk]

 

do the following

.sf-menu > li > ul {
    padding: 26px 30px 31px;
    width: 300px;
    position: relative;  // add this
}

.sf-menu li ul {
    display: none;
    left: 0;
    top: 4px;  /// change 42px to 4 px
    z-index: 99;

}

.sf-menu > li {
    float: left;
    border-right: 1px solid #d6d4d4;
    margin-bottom: -3px;
    width: 116px;  //add this
    height: 35px;  // add this
}

menu fixed, thank you, but new trouble comes out, have look please

[sandipchandela]

set height also in .sf-menu > li

Edited August 26, 2016 by archSandy (see edit history)

[mehdi.nk]

set height also in .sf-menu > li

nothing happen

[sandipchandela]

remove "//add this" text