sub-menu float right problem

songsofhope883 · Member · Jul 27, 2013 at 1:47 am
Copy link

Add topic to favorites
Hi
My blog is Superhero theme and I have the design upgrade. I currently have a menu full width (done with some CSS addition). I want to go back to the narrow default menu location to the right of the Title. When I do this, my submenus extend to the right beyond my browser window so I cannot see the submenu items or select them.

Is there a way to make submenu items come out to the left rather than the right when my mouse goes over the menu and sub-menu items?

Many Thanks
songsofhope883

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 27, 2013 at 5:16 pm
Copy link
@songsofhope883, it looks like you have the menu back up to the right of the site title. Since you are using submenus and sub-submenus, and since your menu labels are shorter, I might suggest setting the width of them narrower. The following in your CSS has the default 175px, but you might try taking that down to perhaps 130px or 140px and see what you think.
```
.main-navigation ul ul a {
width: 130px;
}
```
songsofhope883 · Member · Jul 30, 2013 at 3:30 am
Copy link
Thank you thesacredpath for this suggestion and code. I have put it in as you say. The second sub-menu under words-for-life is still cut off, but its a lot better. It seems that flying out to the left is not an easy thing to implement.
thesacredpath · Member · Jul 30, 2013 at 7:03 pm
Copy link
I’ve done some further digging, and give this a try and see what you think. It aligns the submenus off the right corner of the parent top level menu item instead of off of the left corner.
```
.main-navigation ul ul {
right: 0;
}
```
songsofhope883 · Member · Jul 30, 2013 at 9:35 pm
Copy link
Hi thesacredpath. I tried this out but it gave me an unpredictable result. Does the css have to go in one particular place in the customizing CSS box?
thesacredpath · Member · Jul 30, 2013 at 9:45 pm
Copy link
When I tried it with Firebug, I put it at the bottom of your CSS and it worked fine, but I now see it is going wonky where it didn’t when I first tried it.

Add this instead and make sure that the values for the width in .main-navigation ul ul a and the left in .main-navigation ul ul match (except for the negative sign).
```
.main-navigation ul ul {
left: -140px;
}
```
songsofhope883 · Member · Jul 30, 2013 at 9:56 pm
Copy link
Hi thesacredpath. This now works! I see what you mean. Its a little unusual but could well achieve what I want. My aim in all this has been to come up with a simplified menu with say only 3 items, but with more submenu layers. My problem in the past is that I run out of real estate to the right. Your solution gives me more space to the right. Many thanks!
thesacredpath · Member · Jul 31, 2013 at 12:16 am
Copy link
You are very welcome.

No items found.