CSS navigation query

ringo747 · 3 Oct 2012 at 17:40

Hi,

I am trying to style a top navigation region as illustrated (poorly) below. I don't want my last dropdown tab to extend further right than the top navigation bar item.

I can't change the code easily as this is on a SharePoint site. I don't have access to the CSS right now but I need to know will there likely be an easy fix for this? Probably the last two top level items will need to have their dropdown menu extend left as opposed to the majority of items which are fine when extending right.

Any ideas?

GravyMonster · 4 Oct 2012 at 08:33

I could be wrong, but I don't think there's any way to do that in CSS alone because there would be some logic required to see if the dropdown extends passed the RHS and then move it left if so.

ikillbears · 4 Oct 2012 at 14:30

they're called spry menus i believe. never used one but surely there must be a tutorial out there

Confused · 4 Oct 2012 at 14:42

Maybe you could make the sub-menu full-width, no matter which menu option you select?

ringo747 · 4 Oct 2012 at 16:07

The only thing I can think of is to use jQuery to find the <li> on the page and for everything towards the left add a "left" class, and a separate class for the right side of the page.

Once this is in place then perhaps use some sort of positioning CSS.