2nd level drop down menu disappears if 3rd level is present

Please go to this URL: http://gdma.bluellipse.com/

and hover over Assets -> Marine Assets.

Which CSS is causing the Marine Assets item to disappear?

 

In your css:

#mainlevelmainnav li li li {
	[B]position:relative;[/B]
	clear:left;
	top:0;
	background: #2C458F;
	left:12em;
}

Code (markup):

change position: relative; to position: absolute;

Just a note, your hover for the top level links (Home, News, etc.) isn't working for IE6.

 

Thanks for the tip on IE6 - I'll take a look at that...

I changed that line to position: absolute as suggested, and the 2nd level "Marine Assets" does indeed remain on the screen. You can see the change now.

*However*, with this change the 3rd level only shows one item and not two...

 

Ok I'll give it another shot

#mainlevelmainnav li li:hover ul,
#mainlevelmainnav li li.sfhover ul{
margin: 0 0 0 130px !important;}

#mainlevelmainnav li li li {/*remove this completely*/}

Code (markup):

remove the whole #mainlevelmainnav li li li code.
Let me know if that works.

 

Hallelujah, that worked. Thanks so much!

Still don't quite fully understand the :hover and then the ul after it though - it's applying a left-margin of 130px on the last ul?

 

I'm glad that helped

Yes, just applying a left margin on the last ul. Without the margin, the UL will just appear above the 2nd level UL.

 

Oh I see, so the margin only applies to the ul when the second li is hover'd over?

Thanks again!

 

Yes. But you can move the margin to the ul style itself to make the code much shorter and you can completely delete the code I provided.