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)
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.