Hello,
The following dentist site is under development: www.tandartsbossers.nl/home.html
I’m making use of Wayfinder 2.0
I have the problem that
sometimes. I can’t reproduce when or when not, the sub-menu flyout disappears, when I hover the menu. The following is happening:
- hover the main menu menu structure
- when there is a second menu under it, it will fly-out.
When I hover the mouse to the secondary menu structure it will sometimes disappears and sometimes it is accessesable. When I managed to have my mouse hover the secondary menu, it is no problem, it will stay and even the third menu level will appear when applicable.
I can’t find the cause of it.
Who has experienced that also before and/or is knowing where I have to look for?
The wayfinder call:
<div id="hoofdnavigatie">[!Wayfinder? &startId=`0` &level=`3` &parentClass=`hide` &parentRowTpl=`wfParentRowCopy` &outerTpl=`wfOuter` &innerTpl=`wfInner` &rowTpl=`wfRow`!]</div>
herewith the Case:
#hoofdnavigatie {
position : absolute;
height : 37px;
margin-left : 112px;
display : inline;
}
.menu {
width : 750px;
position : relative;
margin : 0 0 100px 0;
z-index : 99;
}
.menu ul li a, .menu ul li a:visited {
display : block;
text-decoration : none;
width : 83px;
height : 27px;
color : #7c8185;
padding-top : 9px;
padding-left : 0;
text-align : center;
font-size : 109%;
}
.menu ul {
padding : 0;
margin : 0;
list-style-type : none;
}
.menu ul li {
float : left;
margin-right : 0px;
position : relative;
}
.menu ul li ul {
display : none;
}
.menu ul li ul li a, .menu ul li ul li a:visited {
position : relative;
top : -1px;
font-size : 92%;
width : 82px;
height : 27px;
}
.menu ul li:hover a {
color : #fff;
background : #a2aac7;
}
SS .menu ul li a.active {
background : #a2aac7;
width : 82px;
}
.menu ul li.active {
background : #a2aac7;
width : auto;
}
.menu ul li:hover ul {
position : relative;
top : -1px;
display : block;
position : absolute;
top : 38px;
left : 0;
}
.menu ul li:hover ul li ul {
display : none;
}
.menu ul li:hover ul li a {
display : block;
color : #0f2986;
background : #f0f0f0;
}
.menu ul li:hover ul li a:hover {
color : #dea419;
width : 83px;
}
.menu ul li:hover ul li:hover ul {
display : block;
position : absolute;
left : 80px;
top : 0;
}
.menu ul li:hover ul li:hover ul.left {
left : -80px;
}
Thanks in advance for your help
