Make Navigation Sub Menu Align to Left of Parent.

[JeffCl]

Right now my dropdown submenu's align their left edge to the left edge of their parent, and so stick out of the right side below when their containing text is longer than their parents..

I would like to reverse this.

I want the right edge of the sub menu to align to the right edge of it's parent above.

Can someone give me some pointers please, thanks

Jeff

https://69th-dept.com/

[Sridhar Katakam]

Try adding this CSS:

.site-header .sub-menu {
	border-top: none;
}

.genesis-nav-menu .sub-menu a {
	left: -85px;
	border-top: 1px solid #eee;
}

You may want to go through http://keypresswp.com/custom-menu-flyouts-in-studiopress-news-pro/.

---

Genesis Tutorials | Follow me on Twitter

[JeffCl]

Hi Sridar,

Thanks very much for that help, and the link, very useful. I should really have been using specific css for my menus and submenus.

A small problem I'm having now, after altering the css as above, is that when the Submenu appears, the left half renders first then the right half a second later.

Is there anyway to remedy this?

Thanks again.

[tomatillodesign]

I was having this problem too. Here's what I came up with:

1) Add the CSS class of "menu-right" to the last top-level item in the main menu.

2) Add this CSS:

.genesis-nav-menu .menu-right:hover > .sub-menu {
	right: 280px;
}

[JeffCl]

Hey Tomatillo

Thanks for that, much appreciated.

Jeff

[Author]

Posts