wpfolio sub-menu customization question

@notlaura

this code

.sf-shadow ul {
	background-color: green;
}

only changes the color of the shadow around the sub-menu.

any changes to .sf-shadow ul a:hover are appear to be overwritten by something else, as they don’t do anything…

What I am using right now is this

.sf-menu {
	font-size: 1.4em;
}

div.nav {
	margin-bottom: 4em;
}

.sf-menu li a {
	padding-left: 0px;
}

.sf-menu li:hover, .sf-menu li.sfHover,
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active{
    background: white;
    outline: 0;
    text-decoration: underline;
}

div.menu-header ul li.current-menu-item a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

div.menu-header ul li.current-post-ancestor a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

div.menu-header ul li.current-menu-parent a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

div.menu-header ul li.current-post-parent a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

div.menu-header ul li.current-menu-item a {
	text-transform: none;
	color: black;
	opacity: 0.2;
}

/* deal with submenus */
div.menu-header ul li ul.sub-menu a{
	background: white;
	text-decoration: none;
}

Which gets the menus to show up and behave as intended, except that this code makes no difference between a submenu and its parent menu item. If either the child or the parent is selected or hovered, both are styled the same way. Same goes for either being selected – parent & all child menu items are styled as if they are selected.

All I want is the currently selected item to have an opacity of 0.2 and any item that is hovered, active or focus to have an underline. Somehow I can’t get my head around what needs changing to make that happen…