Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Navigation bar styling WordPress


On this page:

the menu in the black bar at the top of the page needs to be styled to accommodate 3 parent pages and to have their child pages listed under each parent to look like the attached image.

I need them styled to be in Verdana, 12px white font with black background for all pages.

Answers (3)


Pippin Williamson answers:

The answer above won't work because what you are looking for (I believe) is a hover menu, such that the child pages appear only when you hover over the top level menu item. To do this: use a code like the one below:

For the CSS:

.navigation {
text-align: left;
height: 20px;
font-size: 1.0em;
float: right;
width: 100%;

.navigation ul {
margin: 0;
padding: 0;
list-style: none;
height: 32px;
text-transform: uppercase;
.navigation ul li {
position: relative;
float: left;
height: 100%;
font: 12px Verdana #fff;
.navigation li ul {
position: absolute;
top: 25px;
left: 5px;
display: none;
padding-left: 5px;
z-index: 1000;
height: auto;
background: #000;
.navigation li ul li ul {
position: absolute;
left: 200px;
top: 0;
.navigation li ul li {
width: 200px;

.navigation ul li a {
display: block;
text-decoration: none;
padding:5px 5px 5px 0;

/* Fix IE. Hide from IE Mac \*/
* html ul li { float: left; }
* html ul li a { height: 1%; }
/* End */

.navigation li:hover ul {
display: block;
.navigation li:hover ul li ul {
display: none;
.navigation li ul li:hover ul {
display: block;

To display the navigation:

<ul class="navigation">
<?php wp_list_pages('title_li='); ?>

Jill Chongva comments:

You are right that I want a hover for the child pages - but what should my header code look like? When I put in the navigation as you have it (thank you!), I get the list of pages, but they are not styled correctly.

Should I be removing the "topnavbar" and "topnavcontent" all together?

This is what I had:

<div id="topnavbar">
<div id="topnavbarcontent">
<div class="topnavbarleft">
<p><img src=""> <img src=""></p>

<div id="topnavbarright">

<ul class="navigation">

<?php wp_list_pages('title_li=&include=78,82,80,63&title_li='); ?>




which resulted in the links displaying in black, one under the other with the child pages on the far left and not underneath the parent page in the menu bar.