BuddyPress.org

Here’s the code for a sub menu on the right side of the header with subnavigation:

Header.php

<div class="navwrap">

<ul id="dropmenu">

<li<?php if ( bp_is_front_page() ) : ?> class="home_active"<?php endif; ?> class="home">

<a href="<?php echo site_url() ?>" title="<?php _e( 'Home', 'buddypress' ) ?>"><?php _e( 'Home', 'buddypress' ) ?></a>

</li>



<?php if ( 'activity' != bp_dtheme_page_on_front() && bp_is_active( 'activity' ) ) : ?>

<li<?php if ( bp_is_page( BP_ACTIVITY_SLUG ) ) : ?> class="activity_active"<?php endif; ?> class="activity">

<a href="<?php echo site_url() ?>/<?php echo BP_ACTIVITY_SLUG ?>/" title="<?php _e( 'Activity', 'buddypress' ) ?>"><?php _e( 'Activity', 'buddypress' ) ?></a>

</li>

<?php endif; ?>



<li<?php if ( bp_is_page( BP_MEMBERS_SLUG ) || bp_is_member() ) : ?> class="members_active"<?php endif; ?> class="members">

<a href="<?php echo site_url() ?>/<?php echo BP_MEMBERS_SLUG ?>/" title="<?php _e( 'Members', 'buddypress' ) ?>"><?php _e( 'Members', 'buddypress' ) ?></a>

</li>



<?php if ( bp_is_active( 'groups' ) ) : ?>

<li<?php if ( bp_is_page( BP_GROUPS_SLUG ) || bp_is_group() ) : ?> class="groups_active"<?php endif; ?> class="groups">

<a href="<?php echo site_url() ?>/<?php echo BP_GROUPS_SLUG ?>/" title="<?php _e( 'Groups', 'buddypress' ) ?>"><?php _e( 'Groups', 'buddypress' ) ?></a>

</li>



<?php endif; ?>



<?php wp_list_pages('sort_column=menu_order&title_li&'); ?>

<li class="tricks"><?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i', '<li$1><a$2><span>$3</span></a>', wp_list_categories('echo=0&orderby=name&exlude=181&title_li=&depth=2')); ?></li>

</ul>

</div>

CSS that goes with it:

/* Navigation */

.navwrap {

-moz-border-radius:8px;

-webkit-border-radius:8px;

background:url(_inc/images/top_bg.png) repeat scroll left top;

float:right;

margin:43px 0 0;

padding:10px 10px 3px;

}



#dropmenu,#dropmenu ul {

font-size:15px;

line-height:1.5em;

list-style-position:outside;

list-style-type:none;

position:relative;

width:100%;

z-index:300;

}



#dropmenu a {

color:#FFFFFF;

display:block;

font-family:nevisBold,"Trebuchet MS",Arial,Helvetica,sans-serif;

font-size:13px;

margin-left:2px;

padding:0 10px 0 17px;

text-decoration:none;

text-transform:uppercase;

}



#dropmenu a:hover {

border-bottom:4px solid #EFEFEF;

color:#555 !important;

text-shadow:0 1pt 1pt #FFF;

}



ul#dropmenu li.selected a,ul#dropmenu li.current_page_item a {

list-style-image: url(_inc/images/home.png);

}



#dropmenu li {

float:left;

padding-right:4px;

position:relative;

}



#dropmenu ul {

display:none;

position:absolute;

}



#dropmenu li ul a {

-moz-border-radius:8px;

-webkit-border-radius:8px;

background:#FFF;

border:1px solid #333;

float:left;

height:auto;

margin-bottom:1px;

margin-top:5px;

padding:3px;

width:150px;

}



#dropmenu ul ul {

top:auto;

}



#dropmenu li ul ul {

left:12em;

margin:0 0 0 10px;

}



#dropmenu li:hover ul,#dropmenu li li:hover ul,#dropmenu li li li:hover ul,#dropmenu li li li li:hover ul {

display:block;

}

Finally some javascript that you can put in your footer for some nice effects:

<script type='text/javascript'>

jQuery(document).ready(function() {

jQuery("#dropmenu ul").css({display: "none"}); // Opera Fix

jQuery("#dropmenu li").hover(function(){

jQuery(this).find('ul:first').css({visibility: "visible",display: "none"}).show(268);

},function(){

jQuery(this).find('ul:first').css({visibility: "hidden"});

});

});

</script>

You should tweak the .css and remove some unneeded images/padding/margin etc. Good luck dude!