I'm working on a site and *almost* have the navigation working the way I want. I'm obviously missing a couple things in my css but I can't seem to see it.

Demo site: http://polkcity.server307.com

On the site, the Hover and the Current Page seem to be working correctly. (Small caps, centered horizontally and vertically, hover graphic displaying)

However, the other states are not pulling the custom CSS inserts. (see below)

1. What do I need to change to make my non-hover, non-current page links format as small caps, centered horizontally and vertically, either with or without a background graphic?

2. There is a strange overlap from the menu onto the logo, seen as approx 20px of dark green. How do I remove that? I'm guessing it has something to do with having dark green loaded on ATA Page Menu Bar background, mainly because I couldn't figure out how to load nothing in that space.

3. Suggestions on how to center the background image when in hover and current page state? Either with CSS or possibly by making the graphic bigger and forcing set, uniform widths on each cell...

4. I'd hoped to format the drop down child-portion of the menu as standard ATA, no extra CSS. Advice on how to get the custom CSS off of these?

And, thank you JuggleDad and the ATA community, I couldn't have gotten this far without your help on the following posts:

http://forum.bytesforall.com/showthread.php?t=4697
http://forum.bytesforall.com/showthread.php?t=5814
http://forum.bytesforall.com/showthread.php?t=6015


Current CSS Insert
/* ================================================== */
/* Menu item */
/* ================================================== */
div#menu1 {
height: 54px;
margin-top:0px;
}

div#menu1 ul.rMenu li a:link {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
}

div#menu1 ul.rMenu li a:active {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
}

div#menu1 ul.rMenu li a:hover {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
background: url(http://polkcity.server307.com/wp-con.../menuhover.jpg) no-repeat !important;
}

div#menu1 ul.rMenu li.current_page_item a:visited {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
font-variant:small-caps;
-x-system-font:none;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
background: url(http://polkcity.server307.com/wp-con.../menuhover.jpg) no-repeat !important;
}

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

If you combine the CSS Selectors you should be able to replace that entire css wth this
{HTML]div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:link,
div#menu1 ul.rMenu li a:hover,
div#menu1 ul.rMenu li a:active {
height: 54px;
padding-top: 15px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 0px;
text-align: center;
align: center;
-x-system-font:none;
font-variant:small-caps;
border-bottom:1px solid transparent;
border-left:1px solid transparent;
border-right:1px solid transparent;
border-top:1px solid transparent;
border-style:solid;
background:transparent !important;
}

div#menu1 ul.rMenu li.current_page_item a:visited,
div#menu1 ul.rMenu li a:hover {
background: url(http://polkcity.server307.com/wp-con.../menuhover.jpg) no-repeat !important;
}[/html]

Thanks for the info on the order, didn't know that. However, making that alteration (in my own code or using yours) doesn't change anything in my page display. Any other suggestions on that, or on any of the other questions posted?

Thank you!
-Kimberly

it looks like you have this working??

Jdad, thanks to your CSS from the earlier post, I've worked out that this

div#menu1 ul.rMenu li.current_page_item a:visited {
background: #fff !important;}

would change the active tab which is great if I have a single level navigation.
Could you help me with a double navigation for the same issue? I would like to have white for both the active parent tab and the active child tab if this makes sense. At the moment only the actual active page's tab gets to be white be it parent or child.
Many thanks,
Ildi

Go to a page that is a child then look at the source of the page. You should see a class for the parent like ancestor or parent (using my iPad and can't look it up). Using that, you can build an additional CSS selector for your rule

Yay, this worked:

div#menu1 ul.rMenu li.current_page_parent a:visited {
background: #fff!important;}

Thank you!!