BuddyPress.org

@djpaul here’s what I got so far. I think a couple of these styles are redundant or could be redone with less code. I didn’t mess with the original nav css, that code might be able to be integrated into the drop menu’s css.

/* Menu

ul#nav li.selected:hover > a,
ul#nav li.current_page_item:hover > a,
ul#nav li.current_menu_item:hover > a {
background: #333;
color: #fff;
}

#nav ul {
box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
display: none;
position: absolute;
top: 30px;
left: 0;
float: left;
width: 180px;
z-index: 99999;
}

#nav ul li {
min-width: 180px;
position: relative;
}

#nav ul a {
background: #333;
padding: 10px;
width: 160px;
height: auto;
}

#nav ul li a {
-moz-border-radius-topleft: 0px;
-webkit-border-top-left-radius: 0px;
-moz-border-radius-topright: 0px;
-webkit-border-top-right-radius: 0px;
}

#nav ul.sub-menu li a {
background: #333;
color: #fff;
}

#nav li.current_page_item a:hover,
#nav li.current_menu_item a:hover,
#nav ul.sub-menu li a:hover {
background: #222;
}

#nav li:hover > a,
#nav ul ul :hover > a {
background: #333;
color: #fff;
}

#nav li:hover > ul {
display: block;
}

#nav ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}