Create a Semi-Transparent Sub-Menu
This will create a darkened semi-transparent sub-menus on your SmugMug website and a darkened semi-transparent when hovered. I included removing the border around the menu if desired. You can adjust the opacity by changing .25
from 0
to 1
with 0
being transparent and 1
being solid. If you want a lightened semi-transparent then replace rgba( 0, 0, 0, .25 )
to rgba( 255, 255, 255, .25 )
.
NOTE: I’m using the Customize Your SmugMug’s Menu and Dropdowns for my Example Menu.
CSS
/**
* Adds a Semi-Transparent Sub-Menu and Hover
************************************************/
.sm-user-ui,
.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 );}
/* Opacity for Menu Hover */
.sm-user-ui .yui3-menu .yui3-menu-children .yui3-menu-item .yui3-menu-label:hover {background: transparent !important;}
.sm-user-ui.yui3-menu-vertical .yui3-menu-item:hover,
.sm-user-ui .yui3-menu-vertical .yui3-menu-item:hover {background: rgba( 0, 0, 0, .25 );}
/**
* Removes Sub-Menu Border
************************************************/
.sm-user-ui .yui3-menu .yui3-menu-children {border: none;}
/* End Both */