Can't override hover with my CSS

GarfieldKlon

Hi

I'm trying to override the hover background of my menu with this:

div yui3-menu ul.yui3-menu-children li.yui3-menu-item:hover {background-color: red !important}

What I'm doing wrong?

edit:
Ok, found out that I have to copy the whole css path to override it:
.sm-user-ui.yui3-menu-vertical a.yui3-menu-label:hover, .sm-user-ui .yui3-menu-vertical a.yui3-menu-label:hover, .sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover, .sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item a.yui3-menu-label:hover

Allen

Pulled this out of my "entire site" CSS.

          /* menu hover */
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
   [COLOR="Red"]color[/COLOR]: gold!important;
    x-webkit-transition:color 0.2s ease-in;
    x-moz-transition:color 0.2s ease-in;
    xtransition:color 0.2s ease-in;
}

Changed color to background and it worked.

/* menu hover */
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
   [COLOR="Red"]background[/COLOR]: gold!important;
    x-webkit-transition:color 0.2s ease-in;
    x-moz-transition:color 0.2s ease-in;
    xtransition:color 0.2s ease-in;
}

Allen

Think this is covering the drops.
.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children {
background-color: rgba(0, 0, 0, 0.6);
}

Allen

Here's my whole menu CSS, rather then trying to pick out pieces. It covers the two top menus but
only the lower menu has drops. Birds drop is the most extensive.

/* ========== menu ============= */
/* ========== menu ============= */

     /* shorter menu drop buttons */
.yui3-menu-item>.yui3-menu-label {
   padding: 1px 46px 1px 22px;
   border-width: 0 0 1px;
   border-style: solid;
}

          /* menu hover */
.sm-page-widget-nav-toplink a :hover, 
.sm-page-widget-nav-toplink a:hover {
   color: gold!important;
}

     /* transparent backgrounds */
 .sm-page-widget-nav-toplink .yui3-menu > .yui3-menu-children {
    position: absolute;
}

.sm-user-ui.yui3-menu-vertical .yui3-menu-children, 
.sm-user-ui .yui3-menu-vertical .yui3-menu-children {
    background-color: rgba(0, 0, 0, 0.6);
 }
     /* END transparent backgrounds */

.yui3-menu-children {
    opacity: 0;
}

.yui3-menu-open > .yui3-menu-children {
    opacity: 1;
}


.sm-page-widget-nav-toplink {
  border-right: 2px solid #999;
  padding: 0 20px;
  margin: 0!important;
  line-height: .8em;
}

.sm-page-widget-nav-toplink:last-child {
  border-right: 0 solid #ccc;
}


.sm-page-widget-nav-toplink a[href*="/Public-Site-Index"] {color:gold !important;}
.sm-page-widget-nav-toplink a:hover[href*="/Public-Site-Index"] {color:yellow !important;}
.sm-page-widget-nav-toplink a[href*="/Family-Search"] {color: #666; font-style:italic;}

/* ========== END menu ============= */
/* ========== END menu ============= */

GarfieldKlon

Thank you

It's little bit expensive to find the right element, then switch back to the theme settings and edit the CSS. Would be nice if the CSS changes could be seen on the fly somehow.

Hikin' Mike

GarfieldKlon wrote: »

Thank you

It's little bit expensive to find the right element, then switch back to the theme settings and edit the CSS. Would be nice if the CSS changes could be seen on the fly somehow.

If you use one of the Browser WebTools, you can do that. I use Firefox and I use the 'Firebug' webtool. You still have yo add it to your CSS, but this allows you to check the code "on the fly".

GarfieldKlon

Yep, I'm also using Firebug or the built-in plugin from Firefox. But sometimes, the effects are not the same. Or especially for finding hovered elements and to change the css of such elements.

Anyway, my changes also effects the admin menu. I can live with that, but it's not really nice.

Allen

I also still use Web-Developer for one purpose. The edit CSS box shows all the site CSS in tabs. I systematically
delete CSS from each tab watching page for effects. This way I can march thru the CSS finding what rules
affect the element I'm focused on. When I find the tab containing the "affecting CSS" I then bunch delete looking
for the exact rule.

Then in the last tab I add my experimental CSS to modify the element.

GarfieldKlon

The problem is still, that the admin menu has the same css classes than the user menu. But ok, I'll have a look, maybe I just have to define a parent that only my menu has.