BuddyPress.org

I can’t pull up your site at all, or I’d give it a go. Shouldn’t be a hard fix.

Its controlled by NAV element.

Just had a quick look in default.css

div.item-list-tabs {
clear: left;
overflow: hidden;
margin: 25px -19px 20px -19px;
background: #eaeaea;
}
div.item-list-tabs ul li a {
text-decoration: none;
}

div.item-list-tabs ul {
width: 100%;
}
div.item-list-tabs ul li {
float: left;
margin: 5px 0 0 5px;
}
div.item-list-tabs#subnav ul li {
margin-top: 0;
}

div.item-list-tabs ul li:first-child {
margin-left: 20px;
}

div.item-list-tabs ul li.last {
float: right;
margin: 7px 20px 0 0;
}
div.item-list-tabs#subnav ul li.last {
margin-top: 4px;
}

div.item-list-tabs ul li.last select {
max-width: 175px;
}

div.item-list-tabs ul li a,
div.item-list-tabs ul li span {
display: block;
padding: 5px 10px;
text-decoration: none;
}
div.item-list-tabs ul li span {
color: #aaa;
}

div.item-list-tabs ul li a span {
display: inline;
padding: 0;
color: inherit;
}

div.item-list-tabs ul li.selected a,
div.item-list-tabs ul li.current a {
background-color: #fff;
color: #555;
font-weight: bold;
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
}
ul li.loading a {
background-image: url( ../images/ajax-loader.gif );
background-position: 92% 50%;
background-repeat: no-repeat;
padding-right: 30px !important;
}
div#item-nav ul li.loading a {
background-position: 88% 50%;
}

div.item-list-tabs#object-nav {
margin-top: 0;
}

div.item-list-tabs#subnav {
background: #fff;
margin: -15px -19px 15px -19px;
border-bottom: 1px solid #eaeaea;
min-height: 35px;
overflow: hidden;
}

div.item-list-tabs ul li.feed a {
background: url( ../images/rss.png ) center left no-repeat;
padding-left: 20px;
}

Change the #colours to suit.

I think that is correct. Apologies if not

Actually, I believe this is the more relevant code:
ul#nav {
margin: 0;
padding: 0;
position: absolute;
right: 15px;
list-style: none;
bottom: 0;
max-width: 65%;
}
ul#nav li {
float: left;
margin: 0 5px 0 0;
}
ul#nav li a {
display: block;
color: #fff;
text-decoration: none;
padding: 5px 15px;
background: url( ../images/60pc_black.png );
-moz-border-radius-topleft: 3px;
-webkit-border-top-left-radius: 3px;
-moz-border-radius-topright: 3px;
-webkit-border-top-right-radius: 3px;
}
ul#nav li.selected a, ul#nav li.current_page_item a {
background: #f5f5f5;
color: #555;
}
ul#nav a:focus { outline: none; }

Are you just using the default theme?
If you’re going to mod very much at all, you should technically create a child theme and work from there, although it’s easy enough to save your CSS as you go.
(Hey, smart forum members, is there already a skeleton theme somewhere? I could probably post one, if not.)

Anyway, assuming you’re working from the default theme, find the folder “bp-default” in the “bp-themes” folder in the buddypress plugin folder. Then open style.css and, working from the above, after the existing lines in the style.css file, add only the parts that pertain to color (e.g., ul#nav li:hover > a{background-color:#330033; color:#9900FF;}
). That way, as long as you remember to backup this file regularly, you’ll know exactly what you’ve modified from the original.

If you want a menu with dropdowns, we’ll need to add some other code. Can pretty easily modify it to use WP3’s new custom menus. You can also remove (some or all of) the buddypress bits from that top menu if you want less clutter.