CMS Made Simple Forums

Posted: **Thu Jan 02, 2014 4:07 pm**

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

.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?

Posted: **Thu Jan 02, 2014 5:03 pm**

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...

Posted: **Thu Jan 02, 2014 5:47 pm**

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%;
}

Posted: **Thu Jan 02, 2014 6:42 pm**

Thank you, this solved it.

Frank

CMS Made Simple Forums

[SOLVED] submenu lines out wrong

[SOLVED] submenu lines out wrong

Re: submenu lines out wrong

Re: submenu lines out wrong

Re: [SOLVED] submenu lines out wrong