sub menu background transparency

Misfit79

Hey All,

I have recently updated my site. One thing I would like to change would be the sub-menus and flyouts. I would like to add a slight transparency without affecting the text. I have been able to add transparency to both, but that does not match the top level.

any assistance would be appreciated

Rory.

www.rjsalpinephotography.ca

Hikin' Mike

Something like this?

`
.sm-user-ui.yui3-menu-vertical,
.sm-user-ui .yui3-menu-vertical,
.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
background: rgba( 0 ,0, 0, .25 );
}

.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children > .yui3-menu-item .yui3-menu-item:hover,
.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 {
background: rgba( 0 ,0, 0, .5 );
}
`

Misfit79

wow, ty for the code.
unfortunately that did not work, I did get drop shadows though. I have left it up in case you want to take a look.

Hikin' Mike

If you want your sub-menus and flyins to have a "opacity" then you are missing this:

.sm-user-ui.yui3-menu-vertical,
.sm-user-ui .yui3-menu-vertical,
.sm-user-ui.yui3-menu-vertical .yui3-menu-children,
.sm-user-ui .yui3-menu-vertical .yui3-menu-children,
.sm-user-ui.yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children,
.sm-user-ui .yui3-menu-horizontal > .yui3-menu-children .yui3-menu-children {
background: rgba( 0 ,0, 0, .25 );
}

If that isn't what you want, then I don't understand your question enough.

Misfit79

Here is what is happening, Black flyouts, no transparency

Hikin' Mike

Do you want that gray to be solid gray, transparent or opacity?

Is that black flyouts supposed to be transparent or opacity?

Misfit79

Hey Mike,

What I'm looking for is transparency in the menu fly outs, for some reason your code made them black with no transparency.
here is a screenshot of the 'clean version' I just want that grey to be a little see through.

Hikin' Mike

@Misfit79 said:
Hey Mike,

What I'm looking for is transparency in the menu fly outs, for some reason your code made them black with no transparency.
here is a screenshot of the 'clean version' I just want that grey to be a little see through.

Because the grey is a base color, the flyouts are 50% opacity (black). The flyouts are on top of the gray....they add 50% on top of what ever is behind it (gray). If you want the non-flyouts/non-hovers to be gray, I can't see a way to have the flyouts/hovers to have a transparent.

Misfit79

thank you for your input and time! I always feel like I'm using a crayon when I see your code. Again Thx, I always learn from you