I’m having difficulty getting my submenus to appear the way I want.

The site I’m working on is http://www.billybingo.com.au, the problems im having with the submenus are:

1. submenus are the same background-color as the header. (I want to be change them independently of each other.)

2. submenu overlap vertically onto the nav bar, looks a bit messy, need to control the vertical position.

3. submenu appears to the left of the parent menu item, i’m trying to get the submenu to appear directly below

4. im trying to get the submenu items to light up when hovered over like in this image: http://billybingo.com.au/wp-content/uploads/2014/05/billylayout.png (need to fix the margins around the menu items to make the whole box light up!)

basically that image is how i want it too look but I have no idea where to start?!

Thanks guys,
Matt

Thank you for your queries!

These css can be place at customizer’s custom css or at child theme’s style.css

1. You have a css that force color on both navbar and submenu. In order to fix it, find something like this :

.x-navbar, .x-navbar .sub-menu, .tp-bullets.simplebullets.navbar, .tp-bullets.simplebullets.navbar-old, .tp-leftarrow.default, .tp-rightarrow.default {
background-color: #66cc33 !important;
}

And change it into :

.x-navbar, .tp-bullets.simplebullets.navbar, .tp-bullets.simplebullets.navbar-old, .tp-leftarrow.default, .tp-rightarrow.default {
background-color: #66cc33 !important;
}
.x-navbar .sub-menu {
background-color: #00cc33 !important; /* YOUR SUBMENU BACKGROUND COLOR */
}

2. It does not overlap on my view after changing submenu background color.
3. May be you meant that it appears on parent’s right? Because of this default css :

.masthead-inline .x-navbar .sub-menu {
left:auto;
right:0;
}

Then you can add this css to override that default css.

.masthead-inline .x-navbar .sub-menu {
right:auto!important;
left:0!important;
}

4. You could add this css to remove your submenu’s margin.

.x-navbar .sub-menu {
padding:0px!important;
}
.x-navbar .sub-menu li a {
padding: 1.75em!important;
}

Hope this helps.

I have the same Problem with the sub-menu, but i found out that the customizer adds the code:

.x-navbar, .x-navbar .sub-menu, .tp-bullets.simplebullets.navbar, .tp-bullets.simplebullets.navbar-old, .tp-leftarrow.default, .tp-rightarrow.default {
background-color: #66cc33 !important;
}

to the CSS, when you change the Renew -> Navbar Background..

When i add something like:

.x-navbar .sub-menu {
background-color: red !important;
}

to my Childtheme CSS-file it doesn’t change anything, because the added CSS Code from the Customizer are above all other CSS code.

Any ideas?

Please provide the URL of your website so we can take a look into your issue. I am not entirely certain what it is you would like to accomplish based on the information given in your post. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.