Public Forums 71,145 posts

[boerenooi Friend boerenooiJoin date: January 2011Posts: 48Downloads:0Uploads:4 Thanks: 2 Thanked: 3 times in 1 posts]

#182685

Hi Guys

I’ve created a menu for my website, but when you hover over the 2nd level it closes very fast, not allowing visitors to browse through the items. This doesn’t happen in chrome.

This is my menu css:

#ja-cssmenu {
margin: 0; /* all lists */
padding: 0;
border-right: none;
float: left;
padding-top: 10px;
}

#ja-cssmenu ul {
margin: 0; /* all lists */
padding: 0;
}

#ja-cssmenu li {
margin: 0; /* all list items */
padding: 0;
float: left;
display: block;
background: none;
cursor: pointer;
width: 110px;
}

#ja-cssmenu li ul {
width: 16.4em;
position: absolute; /* second-level lists */
z-index: 99;
left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
height: auto;
width: 15.9em;
}

#ja-cssmenu li ul ul {
margin: -2em 0 0 14em; /* third-and-above-level lists */
display: none;
}

#ja-cssmenu li li {
padding: 0 1em 0 0;
margin: 0;
width: 14.9em;
}

#ja-cssmenu ul a {
width: 14.8em;
width: 10.8em;
}

#ja-cssmenu li:hover ul ul, #ja-cssmenu li:hover ul ul ul,
#ja-cssmenu li.sfhover ul ul, #ja-cssmenu li.havechildsfhover ul ul, #ja-cssmenu li.havechild-activesfhover ul ul, #ja-cssmenu li.activesfhover ul ul,
#ja-cssmenu li.sfhover ul ul ul, #ja-cssmenu li.havechildsfhover ul ul ul, #ja-cssmenu li.havechild-activesfhover ul ul ul, #ja-cssmenu li.activesfhover ul ul ul {
left: -999em;
}

/* This "unhides" the sub-menus (left: -999em is what hides them) */
#ja-cssmenu li:hover ul, #ja-cssmenu li li:hover ul, #ja-cssmenu li li li:hover ul,
#ja-cssmenu li.sfhover ul, #ja-cssmenu li.havechildsfhover ul, #ja-cssmenu li.havechild-activesfhover ul, #ja-cssmenu li.activesfhover ul,
#ja-cssmenu li li.sfhover ul, #ja-cssmenu li li.havesubchildsfhover ul, #ja-cssmenu li li.havesubchild-activesfhover ul, #ja-cssmenu li li.activesfhover ul,
#ja-cssmenu li li li.sfhover ul, #ja-cssmenu li li li.havesubchildsfhover ul, #ja-cssmenu li li li.havesubchild-activesfhover ul, #ja-cssmenu li li li.activesfhover ul {
left: auto;
}

/* STYLING THE MENU
-----------------------------------*/
/* 1st level */
#ja-cssmenu li a {
margin: 0;
padding: 8px 15px;
border-left: none;
border-right: none;
display: block;
color: #fff
font-weight: bold;
line-height: normal;
text-decoration: none;
text-align: center;
background: url(../../images/menubg.png) repeat-x top #fff
min-height: 28px;
}

#ja-cssmenu li a:hover,
#ja-cssmenu li a:active,
#ja-cssmenu li a:focus,
#ja-cssmenu li a.sfhover {
color: #ccc
}

#ja-cssmenu li:hover,
#ja-cssmenu li.sfhover,
#ja-cssmenu li.havechildsfhover,
#ja-cssmenu li.havechild-activesfhover {
background: url(../../images/grad1-mask.png) repeat-x top #666
color: #ccc

}

#ja-cssmenu li a.active,
#ja-cssmenu li a.active:hover,
#ja-cssmenu li a.active:active,
#ja-cssmenu li a.active:focus {
background: url(../../images/menubg.png) repeat-x top #fff
color: #fff
}

/* 2nd level and above */
#ja-cssmenu li ul {
border: none;
border-top: 0;
background: #53a0ba

}

#ja-cssmenu li ul ul {
border-top: none;

}

#ja-cssmenu li ul li {
border-top: none;
background: none;
margin-top: -10px;
}

#ja-cssmenu li ul a {
border-right: 0;
border-left: 0;
margin: 0;
padding: 7px 15px;
background: none;
color: #fff
font-weight: normal;
line-height: normal;

}

#ja-cssmenu li ul a:hover,
#ja-cssmenu li ul a:active,
#ja-cssmenu li ul a:focus,
#ja-cssmenu ul li:hover,
#ja-cssmenu ul li.sfhover,
#ja-cssmenu ul li.havesubchildsfhover,
#ja-cssmenu ul li.havesubchild-activesfhover,
#ja-cssmenu ul ul li:hover,
#ja-cssmenu ul ul li.sfhover,
#ja-cssmenu ul ul li.havesubchildsfhover,
#ja-cssmenu ul ul li.havesubchild-activesfhover {
background: none;
color: #fff

}

#ja-cssmenu ul li a.active,
#ja-cssmenu ul li a.active:hover,
#ja-cssmenu ul li a.active:active,
#ja-cssmenu ul li a.active:focus {
background: none !important;
color: #fff
font-weight: bold;

}

#ja-cssmenu li.menu-item5.last-item ,
#ja-cssmenu li.menu-item0.first-item {
margin-bottom: -10px;
}

Would love if someone could help with this!

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#474805

Hi boerenooi,

Could you post your url here? and set Compress CSS in Template manager to No

[Author]

Posts