submenu overwrites main menu

[maxmanavi]

hey everyone,

I have problem with a submenu on a site I created for a friend. I followed the instructions in on forum article I found adding css to create a submenu: it worked but now the submenu overwrites the main menu, as you can see here on the Artwork menu subject:

http://www.martharuess.com

Can anyone help?

Thanks a lot in advance, best
Max

[mariusjopen]

Dear @maxmanavi
you mentioned that you followed some instructions. Where did you have a look?

Best!

Marius

[maxmanavi]

hey marius,

I followed this post:

http://laythemeforum.com:4567/topic/161/sub-menus-dropdown-menu/4

But int he vertical Menu, once the submenu appears it overwrites the next menu item if you know what I mean? I added more space between the menu items, but that's not really a good option. I would love to have the submenu item push down the items below it once you hover, if you know what I mean?

thank you in advance, best
Max

[Richard]

Dear @maxmanavi

I believe i understand what you are trying to achieve, but correct me if i am wrong :)

When you hover on a main menu title e.g "Artwork"
You wish that the sub menu: "broken but beautiful" pushes the 3 menus below downwards a bit, so that there is a nice space for the sub menu to sit in?

Because the Submenu appears only when hovering over "Artwork" you are can use this same 'hover' action to add the distance you wish as well.

With Custom CSS you can make the Menu "ARTWORK" have a larger spacing when you hover over it, and the normal distance when you are not hovering.

there is a CUSTOM CSS area provided by lay Theme.

In the Wordpress menu bar under "LAY OPTIONS"
you will see CUSTOM CSS & HTML

There you will be able to add some CSS code to space out your sub-menus when you hover:

If you are unfamiliar with the basics of CSS in may help you greatly to follow this

http://laytheme.com/documentation.html#custom-css-styling

As you can see each menu- "Menu-item" has a number in this case "artwork" can be called as .menu-item-110

You can add Custom CSS to .menu-item-110 so that when you hover over it -
a padding-bottom of 10px or 1.5vh gets added to the element.

when you move away the padding disappears along with the sub-menu.

.menu-item-110:hover {

padding-bottom : 10px;

}

You can apply the same rules to the other menu-items as you wish just by addressing their specific number eg. .menu-item-92 for "OBJECTS"

It should be noted that their a cleaner ways of coding & addressing menu-item's
however for your purposes i hope this helps you and provides a simple solution

Let me know if this was way off what you needed

Best wishes
Rich

[maxmanavi]

thank you very much Richard, it worked like a charm ;)

all the best
max

[Richard]

Dear @maxmanavi

Awesome!

Many wishes!
Rich