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

Navigation bar styling WordPress

  • SOLVED

On this page: http://phoenixsecurity.ca.c12.previewyoursite.com/

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)

2010-07-23

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='); ?>
</ul>


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="http://phoenixsecurity.ca.c12.previewyoursite.com/wp-content/uploads/2010/07/facebook.png"> <img src="http://phoenixsecurity.ca.c12.previewyoursite.com/wp-content/uploads/2010/07/newsletter.png"></p>
</div>



<div id="topnavbarright">

<ul class="navigation">

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

</ul>

</div>


</div>
</div>


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.