Right Fly Out Sub Menu Goes Too Far

Hi Mary,

You could try this CSS:

.main-navigation ul ul {
    right: 0;
    left: auto;
}

Thank you Tom. That worked perfectly.

I tried to apply it to secondary-navigation but it didn't work. What am I missing for secondary sub-menu?

Replace .main-navigation with .secondary-navigation.

Well yes, that's exactly what I tried that didn't work.

I tried

.secondary-navigation ul ul {
right: 0;
left: auto;
}

and I tried

.secondary-navigation ul {
right: 0;
left: auto;
}

Neither worked, which is why I asked what I was missing.

I'm not seeing that CSS added anywhere on your site?

If you're wanting to do the deeper level items, then you would do this:

.secondary-navigation ul ul ul {
    right: 100%;
    left: auto;
}

I didn't leave it because it didn't work. OK now I have

.main-navigation ul ul {
right: 0;
left: auto; }

.secondary-navigation ul ul {
right: 100%;
left: auto;
}

.secondary-navigation ul ul ul {
right: 100%;
left: auto;
}

If you check the website you will see the primary menu, sub-menu under "Join Us" works great.
If you check the secondary menu under "About Us", you will see that it is the default fly out to the right.

There is also a sub-sub-menu beside link for "Mary Pearson" that you can't see at all.

Try this:

.main-navigation ul ul {
    right: 0;
    left: auto;
}
.main-navigation ul ul ul {
    right: 100%;
}

body .secondary-navigation ul ul {
    right: 0;
    left: auto;
}
body .secondary-navigation ul ul ul {
    right: 100%;
    left: auto;
}

Perfect! Thank you so much Tom!

You're welcome :)