[Solved] CSS dropdown to left

[smeeker]

Hi there! I would LOVE it if you could help me make my 4th submenu drop to the left instead of the right. I’ve been working on this for hours and can’t seem to make it happen.

Here’s where I need help. On the fourth link on the menu, when hovered it will drop down more links to select from. When I hover over one of those, I want that secondary menu to move to the left instead of the right. Only on this one and not the others.

[MOD EDIT] Giant Codedump Removed

[Paulie_D]

Please don’t drop a shipload of code on us like that…it’s called ‘code dumping’.

Instead make an example in codepen.io as suggested in the Tips box on the right hand side of your screen.

[smeeker]

So sorry about that. Here is the URL via code pen: http://codepen.io/smeeker/pen/remgx

[Paulie_D]

You want something like this (at the moment)

#main_nav ul ul ul.sub_drop4 {
        left: -130%;
        top: 0;
}
    

You need to tidy up some of the widths and margins and, eventually, that left figure can be brought down to -100%

http://codepen.io/Paulie-D/pen/zHldi

[smeeker]

Thanks for your help! :)

I went ahead and applied it to the remaining secondary menus under menu_4. The issue now is the slow drag of the green that follows it. Is that what you mean by cleaning up the widths and margins?

Sorry, here is the link: http://codepen.io/smeeker/pen/remgx

[Paulie_D]

The issue now is the slow drag of the green that follows it. Is that what you mean by cleaning up the widths and margins?

Yep.

[smeeker]

I resolved it!

I removed this:
#main_nav ul li.menu_4 ul.drop_4 li ul.sub_drop4:hover {
top:0;
right:100%;
display:block;
}

And replaced it with this:
#main_nav ul ul ul.sub_drop4 {
left:-100%;
top:0;
margin:0;
padding:0;
display:block;
right:100%;
}

And I added the additional sub_drop4 class to each of the

<

ul> ‘s in the HTML code under menu_4

Thank you for the push in the right direction Paulie_D!

[smeeker]

I tried to find this but where do I update my Profile pic? I didn’t see it where I “edit” my profile. I didn’t see where I could message you this question directly otherwise I wouldn’t have put it in this reply.

Love this site! I’m looking forward to spending more time on it. :)

[chrisburton]

@smeeker You need to use Gravatar.

[smeeker]

Thanks! :)

[Author]

Posts