The menu can be seen at this link.
The HTML:
I used a transparent gif which I resized for each menu element, and background images for link, hover and current page (or "hey, you're on this page") art. This is not SEO best-practices, but this client doesn't want to rank (I don't either - I get lousy leads from the web). If you want best-seo, you could add a text div with each page name and position it off-screen - or maybe display:none is SEO friendly as well.
I paste this HTML into header.php - the mods here don't like that, but I keep tight notes in case I have to upgrade. This might work pasted into theme options as well. It goes in the TD (table cell) for the header, in this case immediately after ATA loads the header from the theme options. Watch those <td> and </td> tags!
The first HTML code you'll see preloads the hover and current-page states, so there's not a wait for a hover image, followed by the menu - I left some of the header code in this example so you can see where it goes:
HTML Code:
<td id="header" colspan="<?php echo $cols; ?>"> <?php echo bfa_header_config(); ?> <div id="preload"> <img src="http://madison-creek.com/wp-content/nav/1-b.gif" /> <img src="http://madison-creek.com/wp-content/nav/2-b.gif" /> <img src="http://madison-creek.com/wp-content/nav/3-b.gif" /> <img src="http://madison-creek.com/wp-content/nav/4-b.gif" /> <img src="http://madison-creek.com/wp-content/nav/5-b.gif" /> <img src="http://madison-creek.com/wp-content/nav/6-b.gif" /> <img src="http://madison-creek.com/wp-content/nav/1-c.gif" /> <img src="http://madison-creek.com/wp-content/nav/2-c.gif" /> <img src="http://madison-creek.com/wp-content/nav/3-c.gif" /> <img src="http://madison-creek.com/wp-content/nav/4-c.gif" /> <img src="http://madison-creek.com/wp-content/nav/5-c.gif" /> <img src="http://madison-creek.com/wp-content/nav/6-c.gif" /> </div> <div style="width:700px;"> <ul id="navlist" class="navlist"> <li><a href="http://madison-creek.com" id="homenav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="61" height="35" border="0" alt="home" /></a></li> <li><a href="/our-clients" id="clientsnav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="74" height="35" border="0" alt="clients" /></a></li> <li><a href="/acquisitions" id="acquisitionnav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="103" height="35" border="0" alt="acquisition" /></a></li> <li><a href="/brokerage-advisory" id="brokeragenav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="163" height="35" border="0" alt="brokerage" /></a></li> <li><a href="/properties" id="propertiesnav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="102" height="35" border="0" alt="properties" /></a></li> <li><a href="/contact" id="contactnav"><img src="http://madison-creek.com/wp-content/nav/trans.gif" width="104" height="35" border="0" alt="contact" /></a></li> </ul></div> </td>
HTML Code:
/*navigation ============================================*/ .navlist { margin: 0 0 10px 0; padding: 0; list-style: none; } .navlist li { padding: 0; margin: 0; height: 35px; list-style: none; padding-left: 0 !important; } .navlist li a, .menu li a#visited { display: block; text-decoration: none; height: 35px; background-repeat: no-repeat; } /*hover*/ a#homenav:link {background-image: url('http://madison-creek.com/wp-content/nav/1-a.gif');} a#homenav:hover {background-image: url('http://madison-creek.com/wp-content/nav/1-b.gif');} a#clientsnav:link {background-image: url('http://madison-creek.com/wp-content/nav/2-a.gif');} a#clientsnav:hover {background-image: url('http://madison-creek.com/wp-content/nav/2-b.gif');} a#acquisitionnav:link {background-image: url('http://madison-creek.com/wp-content/nav/3-a.gif');} a#acquisitionnav:hover {background-image: url('http://madison-creek.com/wp-content/nav/3-b.gif');} a#brokeragenav:link {background-image: url('http://madison-creek.com/wp-content/nav/4-a.gif');} a#brokeragenav:hover {background-image: url('http://madison-creek.com/wp-content/nav/4-b.gif');} a#propertiesnav:link {background-image: url('http://madison-creek.com/wp-content/nav/5-a.gif');} a#propertiesnav:hover {background-image: url('http://madison-creek.com/wp-content/nav/5-b.gif');} a#contactnav:link {background-image: url('http://madison-creek.com/wp-content/nav/6-a.gif');} a#contactnav:hover {background-image: url('http://madison-creek.com/wp-content/nav/6-b.gif');} .navlist li {float: left;} .navlist:after {content: "."; display: block; height: 0; clear: both; visibility: hidden;} /*current page*/ body.page-id-4 a#homenav { background: url('http://madison-creek.com/wp-content/nav/1-c.gif'); } body.page-id-5 a#clientsnav { background: url('http://madison-creek.com/wp-content/nav/2-c.gif') no-repeat; } body.page-id-6 a#acquisitionnav { background: url('http://madison-creek.com/wp-content/nav/3-c.gif') no-repeat; } body.page-id-8 a#brokeragenav { background: url('http://madison-creek.com/wp-content/nav/4-c.gif') no-repeat; } body.page-id-9 a#propertiesnav { background: url('http://madison-creek.com/wp-content/nav/5-c.gif') no-repeat; } body.page-id-11 a#contactnav { background: url('http://madison-creek.com/wp-content/nav/6-c.gif') no-repeat; } div#preload { display: none; } /*end navigation ============================================*/