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;
    }