Here is a common navigational scheme, with parent pages on top and child pages (if they exist) on bottom:

We’ll need code to help us: 1) query the page, 2) determine if there are child pages, and 3) properly highlight both the .current_page_parent and .current_page_item links.
Here is the PHP:
<ul id="nav">
<?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
<?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children && is_page()) { ?>
<ul id="subnav">
<?php echo $children; ?>
</ul>
<?php } else { ?>
<?php } ?>
And here is the CSS:
* {
margin:0;
padding:0
}
#nav {
background:#577da2;
border-bottom:1px solid #FFF;
height:32px;
}
#nav li {
margin-right:25px;
}
#nav li, #subnav li {
float:left;
list-style:none
}
#nav a, #nav a:visited {
color:#FFF;
text-decoration:none;
font-weight:bold
}
#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
{
background:#295887
}
#subnav {
background:#e6eef7;
border-top:2px solid #577da2;
border-bottom:2px solid #cad8e6;
height:28px;
}
#subnav li {
border-right:1px solid #295887;
padding:0 7px;
}
#subnav a, #subnav a:visited {
color:#295887;
text-decoration:none;
font-weight:bold
}
#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
text-decoration:underline
}
That’s it!
If you’re wondering why the CSS seems overly verbose, it’s to make sure the :active and :hover states display correctly whether or not subpages exist — if they do, the primary nav uses current_page_parent, if they don’t, it resorts to simply current_page_item.
Pingback: Weekly Links - February 16th | Vandelay Website Design
Pingback: moneyblog » Weekly Links - February 16th
Pingback: Two Tier Dynamic Navigation For Wordpress
Pingback: WordPress Hack: Creating a Two-Tiered Navigation Menu
Pingback: Wp Wordpress » Blog Archive » WordPress Hack: Creating a Two-Tiered Navigation Menu
Pingback: Links for 2008-03-12 [del.icio.us] : BiliÅŸim & Teknoloji Haberleri | BilisimTekno.NET
Pingback: Mastering Your WordPress Theme Hacks and Techniques
Pingback: 精通Wordpress系列教程- 1: 精通Wordpress主题Hacks与技巧 | å¸•å…°æ˜ åƒ
Pingback: A Vertitable Tsunami of Goodness « Feet up, eyes closed, head back
Pingback: paidnetpedia.com
Pingback: WordPress Hack: Creating a Two-Tiered Navigation Menu | [Blog Tutorials]
Pingback: When To Use Magazine-Style Themes For Blogs? | How-To | Smashing Magazine
Pingback: Top 5 WordPress Navigation Menu Tutorials
Pingback: 5个Wordpress导航èœå•教程 | å¸•å…°æ˜ åƒ
Pingback: WP Limits » Blog Archive » 7 Links to Launch the Site
Pingback: When To Use Magazine-Style Themes For Blogs? | [w3b]ndesign
Pingback: WordPress Developer’s Toolbox | Developer's Toolbox | Smashing Magazine
Pingback: Crear menu de navegación de dos niveles para tus secciones « Xyberneticos
Pingback: links for 2008-09-17 | orioa
Pingback: WPå¼€å‘者资æº-2.3: WordPress分类和导航èœå• | å¸•å…°æ˜ åƒ
Pingback: Modifichiamo il menu del nostro Wordpress con uno più web 2.0! - Geekissimo
Pingback: WordPress Developer’s Toolbox | rafdesign
Pingback: AndySowards.com :: Web Development Nerdy Daily Links For 09/27/2008 | AndySowards.com :: Professional Web Design, Development, Programming, Hacks, Downloads, Math and being a Web 2.0 Hipster?
Pingback: Top 5 WordPress Navigation Menu Tutorials | indirazzi.com
Pingback: Top 5 WordPress Navigation Menu Tutorials | How To WordPress
Pingback: Extend Wordpress, 5 tips and tricks - Part 1
Pingback: Wordpress Araçları - İngilizce | indirazzi.com BETA
Pingback: Crear menu de navegación de dos niveles at Blog Borchani Studios
Pingback: WordPress Developer’s Toolbox - å±±æŒå¥½æ¯”春江水
Pingback: WordPress å¼€å‘者工具箱1 | Ruijin Ubuntu Blog 生活ä¸çš„æ¯ä¸€ç‚¹ç‚¹æ»´æ»´......
Pingback: WordPress å¼€å‘者工具箱
Pingback: 精通WordPress主题制作技巧
Pingback: 精通Wordpress系列教程- 1: 精通Wordpress主题Hacks与技巧 - pi4.cn å±äº‹ç½‘
Pingback: 精通WordPress主题制作技巧 - xun`s blog
Pingback: 逿µªÂ·ç½‘络 » Blog Archive » WordPress å¼€å‘者工具箱
Pingback: - WordPress å¼€å‘者工具箱(上)ã€è”讯网】
Pingback: WordPress Developer’s Toolbox | Fusuy.com || Webmaster Accessary Platform
Pingback: cssframework » WordPress å¼€å‘者工具箱ã€å®Œæ•´ç‰ˆã€‘
Pingback: 20 WordPress Tricks to Improve Your Blog
Pingback: 20 Trucchi Per Migliorare Wordpress
Pingback: Crear menu de navegación de dos niveles para tus secciones at Blog Borchani Studios
Pingback: 101 Techniques for a Powerful CMS using WordPress | Noupe
Pingback: WordPress-CMS Hacks and Tricks | Why? Nowhy! DFdou's Blog
Pingback: Wordpress Blog Services - 101 Techniques for a Powerful CMS using WordPress
Pingback: 101 Techniques for a Powerful CMS using WordPress | DataViking
Pingback: 101 Techniques for a Powerful CMS using WordPress
Pingback: 20 WordPress Tricks to Improve Your Blog | brainstorming magazine | use the brain to get ideas
Pingback: 101 Techniques for a Powerful CMS using WordPress | Cosa Nuestra Tropical Lounge
Pingback: 101 Techniques for a Powerful CMS using WordPress | Quest For News, A TUTORIAL Base
Pingback: 70 Very Useful Wordpress Hacks & Tricks » De Web Times - Sharing Useful Resources.
Pingback: 零食屋 » Blog Archive » 5个Wordpress导航菜单教程
Pingback: » 5个Wordpress导航菜单教程 | 零食屋
Pingback: 11 Trik WordPress Conditional Tags
Pingback: 5个Wordpress导航菜单教程 | 帕兰映像
Pingback: Top 5 Tutoriais Menú de Navegación para WordPress | Ajuda Wordpress em Português
Pingback: WordPress Hack : Creating a Two-Tiered Navigation Menu
Pingback: WordPress Developer’s Toolbox | 9Tricks.Com - Tips - Tricks - Tutorials
Pingback: The code to display categories Two-Tiered Conditional Navigation in Wordpress « Graphic Design Blog
Pingback: 101 Techniques for a Powerful CMS using WordPress « Temas e Dicas para Wordpress
Pingback: WordPress Developer’s Toolbox by Oshoamy
Pingback: Creating Two-Tiered Conditional Navigation in Wordpress
Pingback: (摘)精通Wordpress系列教程一 « 李小西的博客
Pingback: wordpress主题的制作和使用技巧 | 一起走过的日子
Pingback: geedebook » 11 Trik WordPress Conditional Tags
Pingback: 101 Techniques for a Powerful CMS using WordPress « WPhub.biz
Pingback: Wordpress Kullanım ve geliştirme kaynakları | web tasarım ve magazin
Pingback: Wordpress Kullanım ve geliştirme kaynakları | SohbeTCix.NeT | Chat Sohbet Muhabbet Odaları
Pingback: Progress 09/06/2010 « Tara Jane Irvine
Pingback: 20 WordPress Tricks to Improve Your Blog « Penchenk First
Pingback: Content Experience Manager » Welcome
Pingback: 精通Wordpress系列教程- 1: 精通Wordpress主题Hacks与技巧 - 天津SEO
Pingback: The Comprehensive Guide for a Powerful CMS using WordPress – Part one: 101 Techniques for a Powerful CMS using WordPress | Web Site Designers
Pingback: 精通Wordpress主题Hacks与技巧
Pingback: WordPress Kullanım ve geliştirme kaynakları | web tasarım ve internet magazin
Pingback: 精通Wordpress教程: 精通Wordpress主题Hacks与技巧
Pingback: Creating Two-Tiered Conditional Navigation in Wordpress « KaixersofT { ScriptBlocK } Weblog
Pingback: WordPress: Tutorials and Resources for Designers and Developers | Freelance Website Designer / Coder
Pingback: Show WordPress Child Pages Alongside Parent Page — Chad Von Lind
Pingback: The Comprehensive Guide for a Powerful CMS using WordPress – Part one: 101 Techniques for a Powerful CMS using WordPress | Wpfail.com
Pingback: The Comprehensive Guide for a Powerful CMS using WordPress – Part one: 101 Techniques for a Powerful CMS using WordPress
Pingback: 20 WORDPRESS TRICKS TO IMPROVE YOUR BLOGMIg33 PC And Mobile Tools | MIg33 PC And Mobile Tools