Navbar hover color different than submenu hover color

mrhoni

If you go to my site you can see what happens on my menu. As I right this, when I hover on the top menu, the text changes from black to white. When I hover on a sub menu item the submentu has a red background and white text, which is what I want, however I would like to be able to set the top menu hover color change from black to a color different than white.

Here is the code, pulled from this forum, I placed in the CSS for my Theme

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: #F4F1DF;
}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #7d1515;
}

/* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-color: #7d1515;
}

/* Turn the navbar text a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #ffffff!important;
}

/* Set the color for the borders between each item of the top menu */
.sm-page-widget-nav-toplink {border-color:#7d1515 !important;}

Hikin' Mike

mrhoni wrote: »

If you go to my site you can see what happens on my menu. As I right this, when I hover on the top menu, the text changes from black to white. When I hover on a sub menu item the submentu has a red background and white text, which is what I want, however I would like to be able to set the top menu hover color change from black to a color different than white.

Here is the code, pulled from this forum, I placed in the CSS for my Theme

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
background: #F4F1DF;
}

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
background: #7d1515;
}

/* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
border-color: #7d1515;
}

/* Turn the navbar text a different color when the mouse hovers over it */
.sm-user-ui .sm-page-widget-nav-toplink a:hover {
color: #ffffff!important;
}

/* Set the color for the borders between each item of the top menu */
.sm-page-widget-nav-toplink {border-color:#7d1515 !important;}

Because of this. You already have a rule telling that it should be white when it's hovered.

mrhoni

Hikin' Mike wrote: »

Because of this. You already have a rule telling that it should be white when it's hovered.

Just wondering if there is a way for setting color on hover on top menu and different color on sub menu

Hikin' Mike

Try removing this in red and add this in green:

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
  background: #F4F1DF;
  }

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
  background: #7d1515;
[COLOR=Lime]color: #fff;[/COLOR]
}
 
  /* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
   border-color: #7d1515;
}

/* Turn the navbar text a different color when the mouse hovers over it */
[COLOR=Red].sm-user-ui .sm-page-widget-nav-toplink a:hover {
  color: #ffffff!important;
}[/COLOR]
[COLOR=Lime].sm-user-ui .sm-page-widget-nav-toplink a:hover {
  color: gray;
}[/COLOR]
/* Set the color for the borders between each item of the top menu */
.sm-page-widget-nav-toplink {border-color:#7d1515 !important;}

mrhoni

Hikin' Mike wrote: »

Try removing this in red and add this in green:

/* Set the default navbar submenu background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label {
  background: #F4F1DF;
  }

/* Set the navbar submenu hover background color */
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
  background: #7d1515;
[COLOR=Lime]color: #fff;[/COLOR]
}
 
  /* Change the border color */
.yui3-menu .yui3-menu-children,
.sm-page-widget-nav .sm-page-widget-nav-popover.sm-page-widget-nav-sublinks-separator .yui3-menu .yui3-menu-label {
   border-color: #7d1515;
}

/* Turn the navbar text a different color when the mouse hovers over it */
[COLOR=Red].sm-user-ui .sm-page-widget-nav-toplink a:hover {
  color: #ffffff!important;
}[/COLOR]
[COLOR=Lime].sm-user-ui .sm-page-widget-nav-toplink a:hover {
  color: gray;
}[/COLOR]
/* Set the color for the borders between each item of the top menu */
.sm-page-widget-nav-toplink {border-color:#7d1515 !important;}

Sorry, it didn't work.

When I used "color: gray", the submenu has the correct background and text color, but the top menu color never changed

If I added !important right after "gray", then the top menu color changes to gray upon hover but also the sub menu text changed to gray.

Hikin' Mike

Try adding the !important on the white color...

.sm-user-ui .sm-page-widget-nav-toplink a:hover {
    color: gray !important;
    } 
    
.yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {
    background: #7d1515;
    color: #fff !important;
}

mrhoni

Thanks. It works now. Top menu text has one color on hover and when submenu opens and item in submenu is hovered, text is now a different color than the text on the top menu hover.

roni

Hi works great is there a way to change the font size in the submenu?

Hikin' Mike

@roni said:
Hi works great is there a way to change the font size in the submenu?

.sm-user-ui .sm-page-widget-nav.sm-page-widget .yui3-menu-children a {
  font-size: 10px
}

roni

Thanks a lot Mike works great