targeting menu labels without targeting the submenu labels at the same time

camner

I am trying to style horizontal menu labels so it has a green background on hover and also style the submenu labels the same way. I used the following code

    /* Set the navbar submenu hover background color */
    /* Note: .sm-page-widget-18841881 is the id for the 2nd menu on the page-the yearly galleries*/
    .sm-page-widget-18841881 .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
      background: #679966;
    } /* End setting the navbar submenu hover background color */    
    /* Change the styling of the gallery menu item links upon hover */
    .sm-page-widget-18841881 .sm-page-widget-nav-toplink a:hover {
      background-color: #679966;
    }

This made things look as in the screenshots below...

I like the submenu hover look, but the main horizontal menu look I didn't like as much because I wanted to have the green background have some padding around it. So, I tried adding this code after the "background-color" code:

padding: 3px 8px 3px 8px;
margin: 0px -25px;

That made things look like this:

I like what this looks like for the main label green background, but I don't like the extra width on the submenu hover.

I can't figure out how to target the main menu hover behavior without having the extra padding and margin apply to the submenu hover as well.

Anyone have any ideas?

Hikin' Mike

Without seeing your site, I can only guess.

Hikin' Mike

This is what I use for my top menu...

/**
* Top Navigation
************************************************/   
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink,  
.sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:last-child {
    margin: 0;
    padding: 10px 18px 5px;
    }   

    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:hover,    
    .sm-user-ui .sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-horizontal .sm-page-widget-nav-toplink:last-child:hover {
        background: rgba( 0, 0, 0, .1 );
        }