wordpress submenu (subpages) takes menu (pages) style

Question

I am working in wordpress building a theme from scratch.

I register the menu with this in my functions.php:

register_nav_menus(array(
    'primary' => __('Primary Menu'),
    'footer' => __('Footer Menu')
));

And then through the appearance>menu I create the pages (menu) or the subpages (submenu). Because I don't do much html here, my css looks like this (my navigation is called #menuDenison):

.site-header nav ul li a{
    color:#363636;
    padding: 42px 15px;
}
.site-header nav ul li a:hover{
    text-decoration:none;
    background-color:#b5d803;
    color:white;
}
#menuDenison ul ul {
 display: none;
}
#menuDenison ul li:hover ul {
 display: block;
}

The problem becomes now. When I hover a page on the menu, and it shows the subpages, the submenus take the same style that the menus so when I am on a submenu (hovering) they have padding: 42px 15px and background-color:#b5d803 and I can not change it, even with !important. Plus, the submenu stays behind the big padding I need to have on the menu, and z-index is ignoring me too. I don't know what to do, any suggestions for this mess? I'm quiet new in web developing and more in wordpress so please, if someone has a suggestion.... say it simple, otherwise my mind won't process it :(!!

Thank you!!!!

Answer 1

you need to play with css like this. add css for submenu.

.site-header nav ul li ul li a{
    color:#363636;
    padding: 12px 15px;
}
.site-header nav ul li ul li a:hover{
    text-decoration:none;
    background-color:#b5d803;
    color:white;
}

try this one.