[SOLVED] submenu lines out wrong

[frankmanl]

I want my submenu to line out with its parent when hovering the parent.

Code: Select all

.menu ul ul { 
	display: none; 
	position: absolute; 
	top: 0;   /*3px for a little bump down for second level ul */
	left: 100%; /* keep left side of this ul on right side of the one it came out of */
	min-width: 10em;
	background-color: #8BC542;
	z-index: 999;
}

But it lines out with ul.primary-nav in stead.
What did I do wrong?

[Dr.CSS]

You have a few things going wrong here, the UL has position: on it(not needed) but the UL LI has overflow:hidden which is messing with the hover effect when you take the position out of the top UL...

I would have used one of the default style sheets like http://multiintech.com/default/cssmenu_vertical.html with the style changes you needed...

[velden]

Alway remember: when using position:absolute it's position is ALWAYS relative to its first positioned (not static) ancestor element

So if you want to make it absolute relative to the menu item, then make sure the parent li has position set:

Code: Select all

.menu > ul > li {
    display: inline-block;
    position: relative;
}

Then remove the overflow from the li:

Code: Select all

.menu ul li {
    margin: 0;
/*    overflow: hidden; */
    padding: 0;
    width: 100%;
}

[frankmanl]

Thank you, this solved it.

Frank