Hello all,

I seem to be missing something here. My submenu is working fine but the next tier (sub sub menu) doesn't work properly. It flickers if I hover where it would be but isn't visible.

nav.primary ul,
nav.primary ul li {
margin: 0px;
float: left;
}
nav.primary ul li {
display: inline;
float: left;
position: relative;
height: 50px;
}
nav.primary ul li a {
display: inline-block;
line-height: 49px;
padding:  0 28px;
color: #ebebeb;
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
letter-spacing: 0.08em;
}
nav.primary ul li > a:hover {
background: rgba(0,0,0,0.55);
cursor: pointer;
}
/*!-----sub menu-------*/
nav.primary ul ul {
opacity: 0;
  filter: alpha(opacity=0);
position: absolute;
top:100%;
left: 0;
z-index: 999;
height: 0px;
}
nav.primary ul li span {
display: none;
}
nav.primary ul li:hover ul {
opacity: 10;
filter: alpha(opacity=100);
height: auto;
overflow: hidden;
}
nav.primary ul ul li {
float: none;
display: list-item;
border-bottom: 1px solid #ededed;
}
nav.primary ul#menu-main-navigation-1 ul li a {
display: block;
line-height: 49px;
text-transform: none;
line-height: 49px;
}
nav.primary ul li:hover > a {
background: rgba(0,0,0,0.55);
height: 50px;
}
/*!-----sub sub menu-------*/
nav.primary ul ul ul{
   opacity: 0;
   filter: alpha(opacity=0);
   position: absolute;
   top:0;
   left: 100%;
   z-index: 9999;
   height: 0px;
}
nav.primary ul ul li:hover ul{
   opacity: 10;
   filter: alpha(opacity=100);
   height: auto;
   overflow: visible;
}
nav.primary ul ul li:hover > a {
   background: rgba(0,0,0,0.55);
   height: 49px;
}

Any help would be most welcome.

have you got a link?

http://jsfiddle.net/x7PtZ/18/

 

the hover problem is on the last item (publications).

Edited September 20, 201213 yr by mantis

Did you manage to solve your issue? I had a quick look, the publications menu and sub menus seem to show up fine on Firefox Which browser did you test it?

Thanks for responding. I solved part of the problem but I just can't seem to get my head around this nav menu. The problem isn't with the browser though, it's me. I'm developing locally for a wordpress site so I don't have a link yet. It works alright for the menu and submenu and the third level menu is only theoretical.

 

If you go to the fiddle and hover just right of the submenu "publications" you'll see what I mean. The parent ul flickers.

It's only a theory but I think it's because the hover is looking for another menu to hover and change and not finding anything. It shouldn't really be a problem. Check your div width sizes. Even if it contains nothing the cursor will stick pick it up. Perhaps if you set your widths to px rather than percentage that might do the trick

Edited September 25, 201213 yr by webDesignerJon

As it turns out its not a problem with the menu itself rather the html generated by wordpress (I didn't make my custom post types hierarchical.) Thanks for having a look.

Hiya Mantis,

 

I've modified your code to a working version, hope it's what you want

 

Fiddle is here: http://jsfiddle.net/x7PtZ/44/

 

Seems the overflow:hidden property was causing the issue. I took that out and added some new styles to hide the sub-sub menu until the sub-menu is hovered.

 

Lyndsey.

Edited September 26, 201213 yr by Lyndsey

As it turns out its not a problem with the menu itself rather the html generated by wordpress (I didn't make my custom post types hierarchical.) Thanks for having a look.

 

No worries. Glad it looks like you have it sorted.

Thank you Lyndsey! BTW I think you're being too modest calling yourself a beginner