RadMenu styling question

Hello,

For a website project (Sitefinity 5.2) I am styling a RadMenu to appear according to my wishes. The menu is horizontal, with vertical dropdowns on mouse-over. Submenu's also drop down vertically as they expand to the right. So far I've been able to change everything that I want, using the information given on this page. 

But now, I can't figure out which css class to change if I want to line up the vertical dropdown with the bottom of the background that is used by the menu (see attached image). As you can see, there's a horizontal line that runs just behind the top of the dropdown menu. It's part of the background image used behind the menu, so not actually part of the menu itself. I've tried various values for various radmenu classes but nothing seems to bump down the dropdown menu so that it lines up with this line. 

Can anyone advise me on where to look?

Thanks!

Hey Bob,

Out of the top of my head I'd say it would have to be a padding/positioning on either .rmSlide or ul .rmVertical .rmGroup .rmLevel1 which should do the trick.

Easiest way to check/play is by using Chrome, right-click on "Vertaalbureau" and choose inspect element. On the rightside of the screen, adjust the rmslide element to overflow:visible and display:block; same for the rmVertical.... this will trigger the dropdown menu to display and you should be able to visually play around with margins/positioning.

If you need a hand, feel free to email and goed om te zien dat ze van Drupal afstappen!
Jochem

Thanks! I added padding-top: 4px;  to the .rmSlide class and it lines up perfectly! I could've sworn I tried that class already, but I guess not. Thanks a lot!

And well spotted ;-)

Ah, I have a follow-up question. While the code worked for the 1st level of the dropdown, the 2nd level is of course also affected, resulting in a misalignment on the sub-submenu. So I thought I'd set a separate padding for the different levels of .rmSlide. I was thinking something along the lines of:

But that didn't do anything at all, not for .rmLevel1 nor .rmLevel2. 

Any ideas? Is there a way to set .rmSlide separately for the different levels? 

Bob,

the ul .rmVertical .rmGroup .rmLevel2 selector should match the second level menu exactly, keep in mind that some of the styling on a radmenu happens inline, so !important might be useful.

Instead of padding-top on the ul, which adds a padding inside div box, try instead top:4px; which would force the box to start lower.

If you're aiming for something generic, a child selector on .rmslide could do the trick.

Or if you're aiming for separate ones

Should work also, but I've not really played with it so you'd have to verify.